I created 2 shapes and have made them spin using CSS animations. Is there any way to specify how long each shape should spin for?
I want the first shape to spin for 5s and then stop, but I want the second shape to keep on spinning.
My code:
#square1 {
position: absolute;
width: 30px;
height: 30px;
background-color: yellow;
margin-left: 240px;
margin-top: 135px;
animation: spin 1s linear infinite;
animation-name: square1;
}
#keyframes square1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
What you want is to change the iteration count on your animation.
You are setting a 360 deg in 1 second. Thats one loop of your animation. Now we add an iteration count to the second square so it repeat 5 times for 5 seconds.
.square {
/*position: absolute;*/
width: 30px;
height: 30px;
background-color: yellow;
margin-left: 240px;
margin-top: 135px;
animation: spin 1s linear;
animation-name: square1;
}
.square2 {
animation-iteration-count: 5;
}
#keyframes square1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="square square1"></div>
<div class="square square2"></div>
Related
I have looked at the previously answered topics on the site. I could not adjust. Although I've set the size and location in the css file. The big visual is right in the middle and it becomes suitable for the screen. Imaged1 class I have given a small visual display in different places and different sizes. Can the codes help?enter image description here
.imaged1 {
position: absolute;
top: 80px;
left: 240px;
width: 65px;
height: 65px;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
enter image description here
enter image description here
Following code may help you:
<div style="text-align: center;position: relative;width:50%;">
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
</div>
.imaged1 {
position: absolute;
top: 36%;
left: 40%;
width: 19%;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
width: 100%;
}
Please check this fiddle for my best guess what you require
And here is the previously asked question
Basically, the circle moves from left to right spinning like a tire. I tried applying transform rotate 360 but it doesn't work.
html:
<div class="circle"></div>
css:
.circle{
height: 100px;
width: 100px;
background-color: green;
border-radius: 10px;
-webkit-animation:movespin 4s ease-in-out;
animation:movespin 4s ease-in-out;
}
#-webkit-keyframes movespin {
0% {
transform: translateX(0px);
transform:rotate(360deg);
}
100% {
transform: translateX(900px);
transform:rotate(360deg);
}
}
Put them together.
.circle {
height: 100px;
width: 100px;
background-color: green;
border-radius: 10px;
-webkit-animation: movespin 4s ease-in-out;
animation: movespin 4s ease-in-out;
}
#-webkit-keyframes movespin {
0% {
transform: translateX(0px) rotate(0deg);
}
100% {
transform: translateX(900px) rotate(360deg);
}
}
<div class="circle"></div>
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
So I'm looking to create a really basic snow effect.
I have a keyframe animation for the flake swaying side to side and moving down the Y axis. I want the element to retain the ending values using forwards. But I also want to then loop the animation (infinite), so that it continues where it left off.
HTML:
<div>
<figure class="small"></figure>
</div>
CSS:
div {
width: 100%;
height: 250px;
background: #184254;
}
figure {
border-radius: 50%;
}
#-webkit-keyframes snowfall {
25% {
transform: translateX(10px) translateY(20px);
}
75% {
transform: translateX(-10px) translateY(30px);
}
100% {
transform: translateX(0px) translateY(40px);
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowfall 2s ease-in-out forwards infinite;
}
http://codepen.io/mildrenben/pen/PwZdXB
You can use two animations, one to move right-left and other to make it fall.
The up to down animation will work with absolute positioning, so it will depend on body height (or its first parent with absolute or relative positioning).
figure {
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes snowside {
25% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
#-webkit-keyframes snowfall {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowside 2s ease-in-out forwards infinite, snowfall 15s ease-in-out forwards infinite;
}
http://codepen.io/anon/pen/YPwOMY