Here is my fiddle: https://jsfiddle.net/PinG1/vyqmpL3f/19/
#keyframes example {
0% {opacity: 0;}
50% {opacity: 100;}
100% {opacity: 0;}
As you can see JS fiddle does not like #keyframes and keeps returning an error. I don't know why and am trying to figure it out.
Any ideas?
There is no #in the jsfiddle code. Also, there is no closing curly bracket (}).
It should be like this:
#keyframes example {
0% {
opacity: 0;
}
50% {
opacity: 100;
}
100% {
opacity: 0;
}
}
First, you did not close your keyframes you left it open :
keyframes example {
0% {opacity: 0;}
50% {opacity: 100;}
100% {opacity: 0;}
Second, you did not add #. Fixed version:
#keyframes example {
0% { opacity: 0;}
50% { opacity: 100; }
100% { opacity: 0; }
}
You also never specified where you were gonna use the keyframes.
Related
I have created a simple css animation that translates an pseudo element vertically. This animation works great in Chrome, FireFox and Safari but not so much in Microsoft Edge or Internet Explorer.
I am struggling to figure out the reason for this bug. Any help would be great!
How the animation should look:
How it looks in Edge and IE:
Animation example: https://jsfiddle.net/9x5vckhb/
#keyframes scroll {
0% {
transform: translate(-50%, 20%);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate(-50%, 120%);
opacity: 0;
},
100% {
transform: translate(-50%, 120%);
opacity: 0;
}
}
I am wondering if this is a bug or not. I for the life could not wrap my head around this. It seemed like the x & y were being swapped after the first animation loop. Switched to transform3d() and it worked perfectly.
Fiddle
&:before {
content: '•';
font-size: round($width/100*63.3);
top: 0;
transform: translate3d(-50%, 30%, 0);
animation: scroll ease 3s;
animation-iteration-count: infinite;
}
And
#keyframes scroll {
0% {
transform: translate3d(-50%, 20%, 0);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
},
100% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
}
}
I want to loop this text ads banner using css keyframes.
first shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
then disappear 3 of them
and again shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
How can I repeat(loop) these action?
If I have infinite in -webkit-animation, I can loop only one element.
Can anyone help please?
Here is my code http://jsfiddle.net/ddpatty/Ng3Qf/
.lg-text-1 {
-webkit-animation: txt-animation 0.8s 1 ease-in-out;
}
.lg-text-2 {
-webkit-animation: txt-animation 1.5s 0.8s 1 ease-in-out;
}
.button {
-webkit-animation: btn-animation 2s 0.3s 1 ease-in-out;
}
#-webkit-keyframes txt-animation {
0% {opacity: 0;}
80% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes btn-animation {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
As I said in the comment, you have to use different keyframes for each animation. Then you have full control over the delay between animation, the point is all the durations are the same, so you have a perfect cycle. Note that using the animation-delay will make each animation have its own cycle (with the same duration). You can try tweaking it to make the total of delay time and duration of all the animations equal but the adjustment is very hard to do. I would create different keyframes (as well as animations) for each element. Here is the code (for webkit-only):
.lg-text-1 {
-webkit-animation: txt-animation1 3s infinite ease-in-out;
}
.lg-text-2 {
-webkit-animation: txt-animation2 3s infinite ease-in-out;
}
.button {
/*....*/
-webkit-animation: btn-animation 3s infinite ease-in-out;
}
#-webkit-keyframes txt-animation1 {
0%, 20% {opacity: 0;}
60% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes txt-animation2 {
0%, 40% {opacity: 0;}
60% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes btn-animation {
0%, 60% {opacity: 0;}
80%, 100% {opacity: 1;}
}
Updated demo
I'm pretty sure you can not restart the animation onclick by using CSS alone. You will need to use jquery/javascript.
DEMO http://jsfiddle.net/Ng3Qf/1/
$("a").click(function () {
var el = $('#one'),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
var el2 = $('#two'),
newone2 = el2.clone(true);
el2.before(newone2);
$("." + el2.attr("class") + ":last").remove();
});
I'm looking at optimising CSS animations for performance.
From what I can find out using
.item { transform: translate(-25px,-50px)
is much more efficient than
.item { left: -25px; top: -50px }
I've setup a little animation that move and rotates a box .balloon which as multiple steps to the animation. The problem is though the animation becomes very jerky, even with positioning ans rotation declared for each step
Here is my standard CSS
#keyframes balloon {
0%,100% { left:809px; top:50px; transform: rotate(0deg) }
10% { transform: rotate(-9deg) }
25%,75% { top:25px }
50% { left:235px;top:75px }
45% { transform: rotate(3deg) }
75% { transform: rotate(12deg) }
}
This is my optimised CSS, which is where the jerky animation comes in to effect
#keyframes balloon {
0% { transform: translate(0,0) rotate(0deg) }
10% { transform: translate(-57.5px,-10px) rotate(-9deg) }
25% { transform: translate(-143.75px,-25px) rotate(-4deg) }
45% { transform: translate(-517.5px,22.5px) rotate(3deg) }
50% { transform: translate(-575px,25px) rotate(4.5deg) }
75% { transform: translate(-287.5px,-25px) rotate(12deg) }
100% { transform: translate(0,0) rotate(0deg) }
}
Is there an alternative solution for this?
I've put a CodePen together here.
In your animation-property, try to add a value for the animation-timing-function
Something like
animation: balloon 15s infinite linear;
would make it more smooth.
I have a simple question (I think).
Is there any way to chain CSS3 animations like:
#element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; }
#keyframes fadeOut {
from { opacity:1; }
to { opacity:0; }
}
#keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
In this case, I think I could fadingIn and fadingOut different elements with different delays.
Thanks a lot,
Lionel
Yes, you can use 0%, 25%, etc. increments and chain the whole animation.
Take a look at this fiddle.
What I have done is using incremenets to make the animation one big chain.
#-webkit-keyframes move {
0% {top: 100px;
left: 100px;
-webkit-transform: rotate(135deg);}
25% {top: 250px;
left: 250px;
-webkit-transform: rotate(135deg);}
50% {top: 100px;
left: 250px;
-webkit-transform: rotate(0deg);}
75% {top: 250px;
left: 100px;
-webkit-transform: rotate(-135deg);}
100% {top: 100px;
left: 100px;
-webkit-transform: rotate(0deg);}
}
The % timings are stops where the animation should change, so to change when your object fades in and out, just change those percentages accordingly.
I need an element that initially has no animation, then animates to a different state on hover (one time, no loop) and after the hover is gone it should animate back to its original state.
Basically just like you would do it with a :hover style and a transition.
Is there a way to achieve that with a CSS3 animation?
This is my current usecase: http://jsfiddle.net/yjD73/11/
On hover an element fades from opacity: 0 to opacity: 1 and back.
This is what i think is not possible with transitions.
EDIT: As requested here the exact code from jsfiddle
a div with four images
<div class="zoombox">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100">
</div>
images stacked onto each other and simple css animations on hover
.zoombox {
position: relative;
margin: 50px;
float: left;
}
/* initial state */
.zoombox img:not(:first-child) {
position: absolute;
top: 0;
opacity: 0;
}
/* On hover in */
.zoombox:hover img:nth-child(1) {
-webkit-animation: first-in 400ms 0ms 1 normal ease-in both;
}
.zoombox:hover img:nth-child(2) {
-webkit-animation: middle-in 1600ms 0ms 1 linear both;
}
.zoombox:hover img:nth-child(3) {
-webkit-animation: middle-in 1600ms 1200ms 1 linear both;
}
.zoombox:hover img:nth-child(4) {
-webkit-animation: last-in 400ms 2400ms 1 linear both;
}
#-webkit-keyframes first-in {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes middle-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
25%, 75% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes last-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
Conic, I have created a JSFiddle that replicates most of what you want with css3 animations.
Here it is.
The code that makes this all possible in CSS is:
#-webkit-keyframes changeImage {
0% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100");}
33% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100");}
67% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100");}
100% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100");}
}
Right now the jsfiddle is having the image run through the animation on hover and return to the original image. Let me know if you need any over things to happen and by the way, this won't work on any touch devices as a result of a lack of hover state possibilities.