I have a script that as soon as the user starts to scroll a box shadow is added that looks very nice. However, this box shadow is added instantly. I would prefer that it fade in using CSS 3. I have tried creating keyframes that change the opacity from 0 - 1 over 1 second but that doesn't work.
Here is the script I am using:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fade-in');
}
});
CSS:
.fixed-top {
background:#FFFFFF;
box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
height: 90px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}
How do I have the box shadow fade in?
Note: I omitted vendor prefixes in this question but they are in my code.
I think you just have a spelling mistake and a syntax error or two, otherwise you're fine. Two things:
Close both functions in your jQuery.
Your CSS mentions fadeIn, but jQuery had fade-in
Here's the new, fixed jQuery code:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
}
}); // <<<< ADDED
});
See this -webkit- demo for a working example.
I am trying to find a transitioning CSS code to transition two images. I want the first image to be shown for 4 seconds then fade into a second image which will stay the same for for seconds then fade back to the first. Right now I am not using CSS and am finding most CSS tutorials are formatted for an on :hoover. I want my image to constantly change without a :hover being needed.
The flexi ad coding I am using now is a ans works fine in waterfox and explorer but you can see the images being loaded in chrome with a bad flicker.
Here's the example of what I am working with. The script I am using now is actually transitioning through 30 images i made some that fade from one to the next and thats why it looks like it fades. I would like some kind of CSS that will only require 2 images and fade one to the next every 4 seconds.
http://www.vulgarmediaproductions.com/walt/walt.shtml
You need to use keyframe animations for this - DEMO
HTML:
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>
CSS:
img {
position: absolute;
width : 320px;
height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
#keyframes fader { to { opacity: 0; } }
EDIT
If your images have transparency, then you'll need to animate the opacity for both of them, not just for the one on top. Like this - DEMO
img {
opacity: 0;
position: absolute;
width : 256px;
height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
#keyframes fadein { 50% { opacity: 1; } }
#keyframes fadeout { 50% { opacity: 0; } }
Also, keep in mind that you'll have to use prefixes (I did not use any since dabblet includes -prefix-free and it's easier to highlight the idea that way):
img:first-child {
-webkit-animation: fadein 8s infinite alternate; /* Chrome, Safari, Android, Blackberry */
-moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
-o-animation: fadein 8s infinite alternate; /* Opera 12 */
animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
#-webkit-keyframes fadein { 50% { opacity: 1; } }
#-moz-keyframes fadein { 50% { opacity: 1; } }
#-o-keyframes fadein { 50% { opacity: 1; } }
#keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
Not tested and just written on the fly, but should work.
If you have any problems getting it to work, let me know...
You may want to debug this using FireBug for Firefox. It helps you alot playing arround with CSS, HTML and JavaScript.
CSS3:
.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }
HTML:
<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
<div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>
JS:
function ssCycle(_obj)
{
var _oList=_obj.getElementsByTagName('div');
for (var _trace=0;_trace<oList.length;_trace++)
{
if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
{
_oList[_trace].style.opacity='0.0';
try
{
_oList[(_trace+1)].style.opacity='1.0';
}
catch(_e)
{
_oList[0].style.opacity='1.0';
}
}
}
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
I've created a simple bounce animation which i'm applying to the :hover state of an element:
#keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-out;
}
17% {
top: 15px;
animation-timing-function: ease-in;
}
34% {
top: 0;
animation-timing-function: ease-out;
}
51% {
top: 8px;
animation-timing-function: ease-in;
}
68% {
top: 0px;
animation-timing-function: ease-out;
}
85% {
top: 3px;
animation-timing-function: ease-in;
}
100% {
top: 0;
}
}
.box:hover {
animation: bounce 1s;
}
The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hover state. I'm not looking for a javascript solution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?
Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/
I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(this).addClass("animated");
})
http://jsfiddle.net/u7vXT/
I created a JsFiddle with this answer from the same post https://stackoverflow.com/a/7697786/8335898 using pure Javascript if anyone wants to use it.
const elements = document.getElementsByClassName('box');
for (let i = 0; i <= elements.length; i++) {
elements[i].addEventListener('animationend', function(e) {
elements[i].classList.remove('animated');
});
elements[i].addEventListener('mouseover', function(e) {
elements[i].classList.add('animated')
})
}
Same answer with #methodofaction but for anyone using React:
import React, { useState } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export default function Icon({ icon }) {
const [animated, setAnimated] = useState(false);
return (
<div
onMouseEnter={() => setAnimated(() => true)}
onAnimationEnd={() => setAnimated(() => false)}
>
<FontAwesomeIcon icon={icon} className={animated ? 'animated' : ''} />
</div>
);
}
just to improve Duopixel answer, when runnig infinite animitation I have to do:
$(".box").css("animation-iteration-count", "1");
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(".box").css("animation-iteration-count", "infinite");
$(this).addClass("animated");
})
This just not abruptly end the animation.
A simple trick will do the job :
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
Set the 'delay' with an high value on the element (not :hover).
From: Stackoverflow - Robert McKee
This won't work in all situations, and won't work for OP without some compromises but I solved this problem by adding an animation to the :not(:hover) selector:
#keyframes stopBounce {
0% {
top: 15px;
}
100% {
top: 0px;
}
}
#keyframes bounce {
ops: bounce code
}
.box{
top: 0px;
transition: top 250ms 1000ms ease-in-out,
}
.box:hover{
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 250ms;
}
.box:not(:hover){
animation-name: stopBounce;
animation-duration: 250ms;
animation-delay: 1000ms;
animation-fill-mode: both;
}
So, what this doesn't do is allow the animation to continue all the way through. As far as I can tell a pure CSS solution to that is impossible. What it does do is allow it to smoothly transition back to it's starting position. The trick is having two selectors, only one of which can be active at any one time.
What this allows us to do is have an animation that plays when the user hovers, and a separate animation that plays whenever the user stops hovering. Since both of these animations can be controlled, it allows us to ensure that the transition between them is smooth.
Like I said, this doesn't fully solve the problem, but it doesn't use JavaScript and will keep things smooth.
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}
<body>
<h1>Hello</h1>
</body>
I have two elements on a page that I'd like to animate via CSS (specifically, -webkit-animation). The animation itself simply bounces an element up and down. One element is always shown and bouncing, the other is not animated until mouse-over (hover).
My question is: Is it possible to sync (have both elements reach their apex at the same time, etc) the animation across both elements regardless of when the 2nd element's animation is started?
Here's my HTML:
<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>
and my CSS:
#-webkit-keyframes bounce {
0% {-webkit-transform: translateY(0px);}
25% {-webkit-transform: translateY(-2px);}
50% {-webkit-transform: translateY(-4px);}
75% {-webkit-transform: translateY(-2px);}
100% {-webkit-transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
margin:10px;
float: left;
background: #ff0000;
padding: 10px;
border: 1px solid #777;
}
#bouncy01 {
-webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
background: #ffff00;
}
#bouncy02:hover {
-webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
and finally, a working demo of the issue: http://jsfiddle.net/7ZLmq/2/
(to see the problem, mouse-over the yellow block)
I don't think its possible natively, but you can actually hack similar functionality by using a bouncing wrapper and some position altering
html:
<div id="bouncywrap">
<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>
<div>
CSS:
#-webkit-keyframes bounce {
0% { padding-top:1px;}
/* using padding as it does not affect position:relative of sublinks
* using 0 instead of 0 b/c of a box-model issue,
* on kids wiht margin, but parents without margin, just try out
*/
50% { padding-top:5px;} /*desired value +1*/
100% { padding-top:1px;}
}
#bouncy01,
#bouncy02 {
margin:10px;
background: #ff0000;
padding: 10px;
border: 1px solid #777;
width:30px;
position:absolute;
}
#bouncywrap {
-webkit-animation:bounce 0.125s ease-in-out infinite;
position:relative;
width:140px;
height:50px;
/* background:grey; /*debug*/
}
#bouncy02 {
background: #ffff00;
left:60px;
top:2px; /*half of desired value, just a fix for the optic*/
}
#bouncy02:hover {
position:relative; /*here happens the magic*/
top:0px;
}
demo http://jsfiddle.net/A92pU/1/
The Web Animations API now allows to control animations very precisely and quite easily.
There are various ways to declare a Web Animation, but since here we started with CSS, here is how to hook to it:
// when the animation starts
document.querySelector("#bouncy02")
.addEventListener("animationstart", (evt) => {
// double check it the animation we wanted
if (evt.animationName === "bounce") {
// retrieve both Animation objects
const myAnim = findAnimByName(evt.target, "bounce");
const otherAnim = findAnimByName(document.querySelector("#bouncy01"), "bounce");
// update mine to act as if it started
// at the same time as the first one
myAnim.startTime = otherAnim.startTime;
}
});
// simple helper to find an Animation by animationName
function findAnimByName(elem, name) {
// get all the active animations on this element
const anims = elem.getAnimations();
// return the first one with the expected animationName
return anims.find((anim) => anim.animationName === name);
}
#keyframes bounce {
0% {transform: translateY(0px);}
25% {transform: translateY(-2px);}
50% {transform: translateY(-4px);}
75% {transform: translateY(-2px);}
100% {transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
margin:10px;
float: left;
background: #ff0000;
padding: 10px;
border: 1px solid #777;
}
#bouncy01 {
animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
background: #ffff00;
}
#bouncy02:hover {
animation:bounce 0.25s ease-in-out infinite alternate;
}
<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>
Note that while it's surprisingly not yet that propular, this API actually exists for some times now, and its browser support (all except IE) is quite good.
I was looking for an alternative solution to those proposed here because:
I am animating a background color - which can't use the positioning magic in the accepted answer.
I wanted to avoid calculations for a very simple animation in my app.
After further research I came across this module by bealearts.
It exposes a very neat API that lets you keep an animation in sync across the app by referring to it's name:
import sync from 'css-animation-sync';
sync('spinner');
Since this seemed a little too good to be true, I tested the library (which is a single short file) in this fiddle and am happy to report it works (hover on the third image and see that I quickly syncs to the second image's animation) :).
Credit: I used the animation from this fiddle by Simurai as a basis for my fiddle.
If anyone wants to replicate the mechanism behind this synchronisation, the code is open, but in it's essence, it uses events listeners for the animation itself as sync points:
window.addEventListener('animationstart', animationStart, true);
window.addEventListener('animationiteration', animationIteration, true);
Hope this helps the next person looking for a solution to this problem.
Calculate and add a delay before adding the class:
function getTime (seconds) {
const msDuration = (seconds * 1000).toFixed(0);
const currentTime = (new Date()).getTime();
const msDelay = msDuration - (currentTime % msDuration);
return (msDelay / 1000).toFixed(4);
}
$('div').css({animationDelay: getTime(0.6) + "s"}).addClass('animating');
https://codepen.io/s-flhti/pen/GRoVXZw
Looks like you can just stack two of the yellow ones and switch visibility on :hover through a parent element.
You need the animation to always be running otherwise you'll run into the sync issue you've got.
I modified your code a bit to get this.
You could use a setInterval to maintain the animation state of the first animation and give the other animation a negative delay to seek to its matching keyframe on mouse-over.
Read about the state-maintaining-interval-thing here, at the "Manipulating CSS Animations" section; read about the negative delay to seek here.
This was my little quest in synchronizing animations for different elements and pseudo-elements, thanks to the ideas above, the solution turned out to be very simple. I hope this small code helps someone.
window.addEventListener('animationstart', e =>
e.animationName == 'rgb' && e.target.getAnimations({subtree: true}).forEach(e => e.startTime = 0), true)
on mouse hover:
remove animation classes from both elements
use requestAnimationFrame(() => { ... add here "bounce" class to both elements })
Should sync nicely.
You could set a class on the root element which set the altertating state, and then alternate the class using a timer
CSS
.alt .bouncy {
padding-top:5px !important;
}
.bouncy {
padding-top: 1px;
transition: padding-top ease 500ms;
}
HTML
<div class="container">
<div class="bouncy">Drip</div>
<div class="bouncy">droP</div>
<div>
Javascript
$(function () {
setInterval(() => $(".container").toggleClass("alt"), 1000)
})
In this way transition and timer do the work of css animation, but controlled by a single master switch (the container).
With css animation sync lib by bealearts, you can easly synchonize animations. But in version 0.4.1 (lastest today), it had the bugs:
Sync gets lost, when all the sync-animation elements are stopped they animation (for example display:none )
First animation starts from non-zero frame after restarting, that may be critical.
Some time after the start of the first animation, it flashes.
Not working with pseudo-elements :before, :after
To fix all theese bugs (but 4) , you can fix library code:
-Add animation-cancel callback
function animationCancel(event) {
if (shouldSync(event)) {
elements.delete(event.target);
}
}
window.addEventListener('animationcancel', animationCancel, true);
-Modify animation-start callback to process first animation
function animationStart(event) {
if (shouldSync(event)) {
const { target: element, timeStamp } = event;
elements.add(element);
let diff;
if (elements.size == 1){
diff = 0;
lastIterationTimestamp = timeStamp;
}else diff = timeStamp - lastIterationTimestamp;
element.style.setProperty('animation-delay', `-${diff}ms`);
}
}
-And empty the body of init() method.
Here is the fixed using sample:
//Sample demo code
jQuery(function($){
window.cssAnimationSync('pulse-visible');
let animateGroup = function(selector){
let hideNext = function(){
let next = $(selector + ':visible:first');
if (next.length){
next.fadeOut();
setTimeout(hideNext, 200 + Math.random()*200);
}else setTimeout(showNext, 200 + Math.random()*200);
}
let showNext = function(){
let next = $(selector + ':hidden:first');
if (next.length){
next.fadeIn();
setTimeout(showNext, 200 + Math.random()*200);
}else setTimeout(hideNext, 200 + Math.random()*200);
};
showNext();
};
animateGroup('.pulsar_sync');
animateGroup('.pulsar');
});
//Fixed library code
/** #see https://github.com/bealearts/css-animation-sync */
window.cssAnimationSync = function(animationNameOrNames) {
const animationNames = new Set(
Array.isArray(animationNameOrNames) ? animationNameOrNames : [animationNameOrNames]
);
const elements = new Set();
let animationDuration;
let isPaused = false;
let lastIterationTimestamp = 0;
const api = {
getElements() {
return elements;
},
free() {
window.removeEventListener('animationiteration', animationIteration, true);
window.removeEventListener('animationstart', animationStart, true);
this.start();
elements.clear();
},
start() {
elements.forEach((el) => {
if (validate(el)) {
if (isPaused) {
el.style.removeProperty('animation-play-state');
} else {
el.style.removeProperty('animation');
}
}
});
isPaused = false;
},
stop() {
isPaused = false;
elements.forEach((el) => {
if (validate(el)) {
el.style.setProperty('animation', 'none');
}
});
},
pause() {
isPaused = true;
elements.forEach((el) => {
if (validate(el)) {
el.style.setProperty('animation-play-state', 'paused');
}
});
}
};
function shouldSync(event) {
return animationNames.has(event.animationName);
}
function validate(el) {
const isValid = document.body.contains(el);
if (!isValid) {
elements.delete(el);
}
return isValid;
}
function init() {
//setTimeout(restart, animationDuration);
}
function restart() {
api.stop();
setTimeout(api.start, 50);
}
function animationStart(event) {
if (shouldSync(event)) {
const { target: element, timeStamp } = event;
elements.add(element);
let diff;
if (elements.size == 1){
diff = 0;
lastIterationTimestamp = timeStamp;
}else diff = timeStamp - lastIterationTimestamp;
element.style.setProperty('animation-delay', `-${diff}ms`);
}
}
function cssToMs(time) {
const num = parseFloat(time);
let unit = time.match(/m?s/);
if (!unit) return 0;
[unit] = unit;
switch (unit) {
case 's':
return num * 1000;
case 'ms':
return num;
default:
return 0;
}
}
function animationIteration(event) {
if (shouldSync(event)) {
const { target: element, timeStamp } = event;
elements.add(element);
lastIterationTimestamp = timeStamp;
if (!animationDuration) {
animationDuration = cssToMs(window.getComputedStyle(element).animationDuration);
init();
}
}
}
function animationCancel(event) {
if (shouldSync(event)) {
elements.delete(event.target);
}
}
window.addEventListener('animationiteration', animationIteration, true);
window.addEventListener('animationstart', animationStart, true);
window.addEventListener('animationcancel', animationCancel, true);
return api;
};
#keyframes pulse-visible {
0% { opacity: 0.85;}
30% { opacity: 0.85;}
40% { opacity: 0.55;}
45% { opacity: 0;}
85% { opacity: 0;}
90% { opacity: 0.55;}
100% { opacity: 0.85;}
}
#keyframes pulse-visible-copy {
0% { opacity: 0.85;}
30% { opacity: 0.85;}
40% { opacity: 0.55;}
45% { opacity: 0;}
85% { opacity: 0;}
90% { opacity: 0.55;}
100% { opacity: 0.85;}
}
.pulsar
{
animation-name: pulse-visible-copy;
}
.pulsar_sync
{
animation-name: pulse-visible;
}
.pulsar, .pulsar_sync
{
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/*styles not depending on animation*/
display: inline-block;
width: 30px;
height: 30px;
margin: 5px;
border: 3px solid red;
border-radius: 25%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
With cssAnimationSync
<div style='min-height:50px;'>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
</div>
Without
<div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
</div>
How does one make a div/input flash or 'pulse'? Say for example a form field has an invalid value entered?
With CSS3 something like on this page, you can add the pulsing effect to a class called error:
#-webkit-keyframes error {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
.error {
opacity: 0.75;
-webkit-animation-name: error;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 10;
}
A YouTube demo if you're not on Safari, Chrome or another browser the above works on. The demo makes use of :hover to start the animation.
You can add the above class to invalid entries.
For example, this is very simple with the jQuery validation plugin:
$(function() {
$("form").validate();
});
jsFiddle example