I have 2 element, one on top of the other and they both animate. Despite using the same keyframe rule and animation properties, the elements are out of sync on the first loop but are in sync after the first loop. WHY?!
The markup:
<div class="small xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="big xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
The css:
#keyframes xfade {
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.xfade span {
animation-name: xfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
fiddle
EDIT In my real-world implementation, the "small" elements are translucent, so the ones underneath are visible at the start of the animation. I thought setting opacity: 0; on all of small's children would solve this (since the keyframe rule brings it back to 1 as soon as the animation kicks in); alas no. This issue also mysteriously solves itself after the first loop.
Any tips for that would also be appreciated.
As vals mentioned, one of the color code you have given is wrong, so first and second color is same. So it feels like the animation is not working as it is same color. (But actually its working)
So, I changed the color code and working fine.
.xfade.big span:nth-of-type(4) {
background: #0300FF;
}
Working Demo
Related
I'm learning how to use transition: in CSS. But for some reason, my images keep flickering instead of giving me smooth animation. I'm developing in Windows 10 with the latest version of Chrome. Here is my code, which is very simple:
function toggleClass() {
var box = document.getElementById('box');
box.className = box.className.match(/active/) ? '' : 'active';
}
#box {
width:200px;
height:200px;
background-color:#999;
opacity:0;
transform:translate(0,30px);
transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
opacity:1;
transform:translate(0,0);
}
img {
width:100%;
display:block;
filter: grayscale(100%) brightness(120%);
mix-blend-mode:multiply;
}
#box:hover {
background-color:red;
}
<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
<img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>
What I want to do is when I press the Toggle Image button, I want a grey scale to fade in. Then when I mouse over the image, I want it to turn red since it is using the mix-blend-mode and the #box should have a red background color.
The problem is that every time I add the active to #box.active, the image doesn't "gradually fade in". Instead, a solid grey box scrolls up and fades in. Once the grey box completes animation, the image then "snaps" into view as if animation duration is 0 seconds. I don't want the image to "snap" into view...I want the image to fade in smoothly just like the grey box.
I want both the grey box and the grey picture to animate in smoothly together.
How do I make this happen?
EDIT
I noticed that if I add the line #box.active {background-color:transparent;}, then the image fades in. But the image is too bright. Applying a #box-active {background-color:#999;} had the same problem as the original question.
EDIT 2
I noticed that if I add these lines, it almost does what I need
#box { background-color:rgba(155,155,155,1); }
#box.active { background-color:rgba(155,155,155,0.9);}
For some unusual reason using rgba along with an alpha of 1 before the active class and an alpha of 0.9, seems to help a little. Now I see the browser "trying" to animate things in smoothly, it's just very choppy now.
Try adding transform: translateZ(0) on the child element img.
function toggleClass() {
var box = document.getElementById('box');
box.className = box.className.match(/active/) ? '' : 'active';
}
#box {
width:200px;
height:200px;
background-color:#999;
opacity:0;
transform:translate(0,30px);
transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
opacity:1;
transform:translate(0,0);
}
img {
width:100%;
display:block;
filter: grayscale(100%) brightness(120%);
mix-blend-mode:multiply;
transform: translateZ(0); // this rules forces a new layer
}
#box:hover {
background-color:red;
}
<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
<img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>
Theoretically your code is correct, this has been a bug in chrome for quite some time.
The translateZ(0) workaround forces chrome to draw seperate layers for the GPU to toy with. You can find more about layers here.
Also note that if you're going for visual consistency, you might have to go with some additional vendor prefixed styling.
As of now, Chrome, Firefox and Edge don't agree on what a blend should look like
I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?
<div class="hover15">
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
</div>
Use following Code :
transition-duration: 100s;
Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play # click events kindly refer to KeyFrames.
Use like this :
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 1ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:active,
.class:focus,
.class:hover {
//hover style you define
}
Reference click here to see the effect
I have images that I want to swap in and out (no slide effect). The first cycle, the images appear stacked on top of each other (since they have holes). All subsequent cycles, it works correctly (only one visible at a time).
Html
<div class="small xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css
#keyframes xfade {
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.xfade span {
animation-name: xfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
height: 100%;
left: 0;
/* opacity: 0; */
position: absolute;
top: 0;
width: 100%;
}
All visible at once during first loop
Only one visible during first loop, but flash
An usual scene when doing animations is where you have the same animation for several elements, but you want them to be delayed, making a sort of full cycle.
Then you set a animation-duration of say 8 seconds, and if you have 4 elements, you set a delay of 0 for the first, a delay of 2s for the second, and 4s and 6s for the others.
The problem with this is that the second element only starts animating after 2 seconds. In the meantime, it has the initial properties, that can match, or not, (usually not) the properties of the animation.
The best way to solve that is to realize that, if the animation-duration is 8s, then setting the delay to 2s is the same than setting it to -6s. because if you count 8s starting in -6s, you will end at 2s. But, then the animation is running from the first moment, with the properties that should have.
So, the delays in your case should be 0s, -6s, -4s, -2s. Just subtract the transition-duration from the transition delay.
Whenever you set an animation, and discover than the first animation is wrong, but after that they are ok, the likely problem (and solution) is this.
If you want to make everything go faster, but everything else being the same, then you have to reduce both the animation duration and all the animation delays
Example setting
.xfade span {
animation-duration: 4s;
}
.xfade span:nth-of-type(1) {
animation-delay: -1s;
}
.xfade span:nth-of-type(2) {
animation-delay: -2s;
}
.xfade span:nth-of-type(3) {
animation-delay: -3s;
}
fiddle
Also, let's analyze how the tween time is computed. First of all, you are setting the animation for an element that shares the full time with another 3 elements. That means that every element has 1/4 of the time, that is 25%.
This time has to be divided between time of full display and time of tween. Inthe original example, tween time is 8%. If you want that reduced, let's say that tween time will be 6%. Then, full display time will be 25 - 6 = 19.
That gives us the first part of the keyframes:
#keyframes xfade {
0% { opacity:1; }
19% { opacity:1; }
25% { opacity:0; }
Now, for the final keyframes, we have to remember that the tween time is 6, and set that at the end. The keyframe mus be at 100 - 6 = 94. Remainig keyframes:
94% { opacity:0; }
100% { opacity:1; }
}
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up:
#keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
And to make it even more awesome I added a hover animation:
#keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
But there comes the problem! I assigned the animations like this:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Everything works just fine: The <a> splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a> the smooth stuff ends abruptly and the <a> repeats the splash-animation. (Which is logical to me, but I don't want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?
After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute.
There sadly is no way to save a certain attribute states across element states.
You'll have to use JavaScript.
If I understand correctly that you want to play the animation on A only once you have to add
animation-iteration-count: 1
to the style for the a.
It can be done with a little bit of extra overhead.
Simply wrap your link in a div, and separate the animation.
the html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
.. and the css ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.
.animateOnce {
-webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-o-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
Just use
animation: hover 1s ease-in-out forwards;
An easy solution to solve this problem is by just adding more seconds to the animation in a:hover and taking advantage of the transitions in #keyframes
a:hover {
animation: hover 200s infinite alternate ease-in-out;
}
Just make the progression of #keyframes go faster by using percentages.
#keyframes hover {
0% {
transform: scale(1, 1);
}
1% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1.1, 1.1);
}
}
200 seconds or 300 seconds in the animation is more than enough to make sure the animation doesn't restart. A normal person won't last more than a few seconds hovering an image.
Impossible in CSS only, you need a javascript workaround. As already explained by some here, the animation-iteration-count property is reset on a :hover. The best is to do everything in javascript, but for reasons of ease of customization of the code you may want to keep the possibility of doing something in CSS.
So, in JS :
// adding a class to the html tag, during the animation time
const startPage = (() => {
const html = document.documentElement,
s = 'start'
html.classList.add(s)
window.addEventListener('load', function() {
setTimeout(() => {
html.classList.remove(s)
}, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
})
})()
And for the CSS:
/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
animation: animDrop 1s ease;
}
The following code without "iteration-count: 1" was resulting in all line items pulsing after entering, until the last item loaded, even though 'pulse was not being used.
<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>
<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>
<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>
<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>
<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
So i just found a solution for that:
In the hover animation do this:
animation: hover 1s infinite alternate ease-in-out,splash 1;