my code as follows
#-webkit-keyframes arrow-jump2 {
0% { opacity: 1;}
100% { opacity: 1;
-webkit-transform: translateX(258px);
-moz-transform: translateX(258px);
-0-transform: translateX(258px);
transform: translateX(258px);
}
}
.arrow3 {
-webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
-moz-animation: arrow-jump2 2s forwards; /* Fx 5+ */
-o-animation: arrow-jump2 2s forwards; /* Opera 12+ */
animation: arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}
the above code works fine with chrome but not with firefox
#-webkit-keyframes arrow-jump2 {
0% { opacity: 1;}
100% { opacity: 1;
-webkit-transform: translateX(258px);
-moz-transform: translateX(258px);
-0-transform: translateX(258px);
transform: translateX(258px);
}
}
#keyframes arrow-jump2 {
0% { opacity: 1;}
100% { opacity: 1;
-webkit-transform: translateX(258px);
-moz-transform: translateX(258px);
-0-transform: translateX(258px);
transform: translateX(258px);
}
}
.arrow3 {
-webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
-moz-animation: arrow-jump2 2s forwards; /* Fx 5+ */
-o-animation: arrow-jump2 2s forwards; /* Opera 12+ */
animation: arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}
firefox dont need -webkit-
Related
I found this SOLUTION but how would I add one more
like this?
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
.animation_delay_1{
animation-delay: 3s;
}
<div class="logo_carousel">
<img id="logo_center"src="logo.png">
<img class="saturn" src="logo1.png">
<img class="saturn animation_delay_1" src="logo2.png">
</div>
I tried to add animation-delay, But this is not quite what I need. The logo just starts spinning later, but I need it to spin immediately but from a different position.
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite;
/* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite;
/* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite;
/* Opera 12+ */
animation: myOrbit 4s linear infinite;
/* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
.animation_delay_1 {
animation-delay: 0.5s;
}
.animation_delay_3 {
animation-delay: 0s;
}
<div class="logo_carousel">
<img id="logo_center" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_2" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
</div>
You would add another image with a new animation class:
<img class="saturn animation_delay_3" src="logo2.png">
Then add a new animation CSS with a new delay such as 4s.
.animation_delay_3{
animation-delay: 4s;
}
Results: https://codepen.io/MistaPrime/pen/YzzXeNJ
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
#-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}
<li class="section-1"></li>
Any help would be great, cheers
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}
<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
#-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
#-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
<li class="section-1"></li>
I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
I'd like to animate 2 images with css whereby 1 starts and stays for 5 secs and the other follows and they both stay for 5 more seconds together and it all starts again in an infinite loop. I'm doing it once but once it goes through the first loop, they all animate at the same time without the second images delay. Please view my code below:
CSS:
img.coke {
position: relative;
animation-name: FadeInOut;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
img.fanta {
position: relative;
opacity:0;
animation-name: FadeIn;
animation-duration: 5s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<div id ="imgo">
<img class = "coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class ="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
As you have noted the animation-delay just works onces to delay the time the animation starts:
Specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.
But you can use the logic you already have controlling the opacity state based on the % of the animation:
img {
max-height: 200px;
}
img.coke {
position: relative;
animation: FadeInOut 2s infinite alternate ease-in-out;
}
img.fanta {
position: relative;
opacity: 0;
animation: FadeIn 2s infinite alternate ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes FadeIn {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="imgo">
<img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
.coke {
height: 100px;
opacity: 0;
-webkit-animation: example1 10s infinite; /* Safari 4+ */
-moz-animation: example1 10s infinite; /* Fx 5+ */
-o-animation: example1 10s infinite; /* Opera 12+ */
animation: example1 10s infinite; /* IE 10+, Fx 29+ */
}
.fanta {
height: 100px;
opacity: 0;
-webkit-animation: example2 10s infinite; /* Safari 4+ */
-moz-animation: example2 10s infinite; /* Fx 5+ */
-o-animation: example2 10s infinite; /* Opera 12+ */
animation: example2 10s infinite; /* IE 10+, Fx 29+ */
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
Try to manipulate animation percentages
Example: https://jsfiddle.net/o4226gmd/
This JSFiddle contains a CSS animation that works for me in Chrome, Firefox and Safari, but not IE 10. It doesn't start the animation in IE10 - can't see anything wrong here?
.x1 {
left: 200px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-animation: moveclouds 47s linear infinite;
-moz-animation: moveclouds 47s linear infinite;
-ms-animation: moveclouds 47s linear infinite;
-o-animation: moveclouds 47s linear infinite;
animation: moveclouds 47s linear infinite;
}
#keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-webkit-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-ms-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
Here's the JsFiddle Link http://jsfiddle.net/zXTSp/1/
Try the Jsfiddle in IE10
http://jsfiddle.net/2V3Sx/
It should be #-webkit-keyframes moveclouds {
not #-webkit-keyframes "moveclouds" {...a typo...:)
Hope this works
I have looked at different answers posted on here but nothing has worked for me...
What: I have a div that is scaled down to 0.6 and when called should scale up to 1 (100%).
Problem: In Firefox #myDiv is scaling up as intended, but nothing happens in Chrome or Safari (on mac).
I have this DIV code:
#myDiv {
-moz-animation: changeSize 1s ease-out .5s forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s forwards; /* Opera */
-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);
display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px;
height: 28px;
position: absolute;
left: 145px;
top: 5px;
}
And the keyframe animation for the scale up transition:
#keyframes changeSize {
0% {transform:scale(0.6)}
100% {transform: scale(1)}
}
#-moz-keyframes changeSize /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
#-webkit-keyframes changeSize /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
#-o-keyframes changeSize /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
The HTML:
Please advise what I am missing here!
Thanks!
Your error is in this line :
-webkit-animation: changeSize 1s ease-out .5s 0 forwards;
There is an unnecessary 0!
Lastly,
#-moz-keyframes changeSize /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
#-webkit-keyframes changeSize /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
#-o-keyframes changeSize /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
Within these keyframes, you're missing something. None of the transform property have browser support prefixes. For example:
#-webkit-keyframes changeSize /* Safari and Chrome */{
0% {-webkit-transform:scale(0.6)}
100% {**-webkit-**transform:scale(1)}
}
I added -webkit- prefix to the transform property now it will display in Google Chrome and Safari.
Side note: you might have some unnecessary code blocks. -moz-,-ms-, and -o-.