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
Related
I'd like the border to rotate on a circular DIV with the background photo
This is an icon in maplibre-gl
The code below rotates but:
the position of the icon has changed to the top left corner of the browser (if I turn off the animation, the location is correct)
the photo also rotates (it should stand still)
Code:
.userLocation {
height: 100px;
width: 100px;
background-image: url('#Model.LogoPath');
background-size: contain;
cursor: pointer;
}
.borderAnimation {
border-radius: 100px;
-webkit-animation: rotate 20s linear infinite; /* Chrome, Safari 5 */
-moz-animation: rotate 20s linear infinite; /* Firefox 5-15 */
-o-animation: rotate 20s linear infinite; /* Opera 12+ */
animation: rotate 20s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
border: 4px dashed #32A3F0;
}
#-webkit-keyframes rotate {
from {
transform-origin: center center;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform-origin: center center;
transform: translateX(360deg);
-webkit-transform: rotate(360deg);
}
}
'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 have my logo spinning on [my website][1]. When I hover it with a mouse i would like it to spin faster smoothly. At the moment when I hover the logo it simply returns back to its original rotation then starts the new rotation faster. I would like the logo to increase and decrease in speed when hovered without returning to the original rotation.
This is my logo:
<img id="logo" src="shilogo.svg" width="50" height="50" alt="Logo">
And here is the current CSS:
#logo{
padding:5px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
-moz-animation:spin 5s linear infinite;
}
#logo:hover{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
}
#-webkit-keyframes spin{
100% { -webkit-transform: rotate(-360deg); }
}
#-moz-keyframes spin{
100% { -moz-transform: rotate(-360deg); }
}
#keyframes spin{
100% { transform: rotate(-360deg); }
}
You should only reset animation-duration to increase speed else the whole rule is reset:(note: result may varie from a browser to another,...)
#logo{
padding:5px;
animation: spin 5s linear infinite;
}
#logo:hover{
animation-duration:1s;
}
#keyframes spin{
100% { transform: rotate(-360deg); }
}
<img id="logo" src="http://dummyimage.com/100" alt="Logo">
You cannot change the speed by changing the time. An idea is to rotate a container in the same direction and the overall speed will increase.
Here is an example:
.logo {
width: 100px;
height: 100px;
background: red;
animation: spin 5s linear infinite;
}
.container {
margin:10px;
display: inline-block;
transition:10s all;
}
.container:hover {
transform: rotate(-3000deg);
}
#keyframes spin {
100% {
transform: rotate(-360deg);
}
}
<div class="container">
<div class="logo"></div>
</div>
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/
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-