I have written an animation code like such:
.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 0;
animation-direction: alternate;
animation-play-state: paused;
}
.bounce:hover {
animation-play-state:running;
animation-iteration-count: 1;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}
And assigned the class "bounce" to a button on my page. When I mouse over it, it has a nice little bounce animation, but when I mouse over it again, it wont play. What can I do to make it bounce every time I mouse over it?
Instead of changing animation-play-state add the animation effect when hovering.
This is an alternative approach as the animation won't continue from where it end as it restarts the animation
.bounce {
width:50px;
height:50px;
background:tomato;
border-radius:50%;
}
.bounce:hover {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: alternate;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}
<div class="bounce"></div>
make your animation-iteration-count: 1; to this animation-iteration-count: infinite;
look like this.
.bounce:hover {
animation-play-state:running;
animation-iteration-count: infinite;
}
Set your css property animation-iteration-count: value to infinite
.bounce:hover {
animation-play-state:running;
animation-iteration-count: infinite;
}
animation-iteration-count: 1;
by using this line of code, when you hover the button the animation will just play once and no more.
Here is the fiddle example: https://jsfiddle.net/eugensunic/wexd3spp/5/
Related
I am new to keyframes and am trying to get an animation to run on a pseudo element in wordpress. I cannot work out why it is not working.
I have read through similar questions and forums but to no avail.
I am actually eventually wanting it to move left and right but I just grabbed some spin keyframes to test it.
The code I have tried is:
.dots::after {
content: url("/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg");
display: inline-block;
width: 150px;
transform: translateY(32px);
margin-right: 80px;
animation: spin .5s infinite linear;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
-o-animation: spin .5s infinite linear;
-ms-animation: spin .5s infinite linear;
-moz-animation:spin .5s infinite linear;
}
#-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
#-o-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
#-ms-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
I tried removing the initial transform as I thought maybe that was the issue and tried applying it to various other objects including elements that were not pseudo classes and even tried it on another website but it just doesn't work.
Any help would be much appreciated.
Thanks
.dots{
display: inline-block;
animation-name: rotating;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: rotating;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotating;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotating;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.dots::after {
content: "";
background-image: url("/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg");
width: 100px;
height:100px;
display: inline-block;
background-size:contain;
background-repeat:no-repeat;
}
#keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-ms-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-moz-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
please double check the url of image. and put the complete url of image like (http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg)
Hope this will help you..
The answer of #Rajkumar Gour is correct and works, but the original code did work for me in latest Firefox too!
I think you will maybe get some problems in specific browser versions because of wrong order of vendor prefixes, I've corrected that issue in the following snippet based on #Rajkumar Gours answer, but as said before the original code should work too...
"When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first..." See css-tricks.com/ordering-css3-properties for further information!
.dots{
display: inline-block;
-webkit-animation-name: rotating;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotating;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotating;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotating;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.dots::after {
content: "";
background-image: url("http://via.placeholder.com/140x100");
width: 100px;
height:100px;
display: inline-block;
background-size:contain;
background-repeat:no-repeat;
}
#-ms-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-moz-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#keyframes rotating {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
<div class="dots"></div>
I am creating a pretty simple keyframe, but for some reason, the rotate portion of the frame I cannot figure out.
I want the keyframe to make two transitions. Here is in illustration, which explains what I am trying to do better. As you can see in my snippet, the rectangle doesn't continue rotation, but goes back to its original postion. Then if I try to do 180deg it still doesn't work, as it eventually goes back.
I am just wanting the square to turn a total of 180 degrees.
#line {
border: 1px solid #8a32cb;
height: 300px;
width: 50%;
-webkit-transform: rotate(0deg);transform: rotate(0deg);
transition: 1s;-webkit-transition: 1s;
/*animation: spin 2s ease-in-out forward;*/
animation-name: spin;
animation-duration: 2s;
animation-delay: .7s;
animation-direction: forward;
animation-timing-function: ease-in-out;
}
#keyframes spin {
25% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
/*50% {-webkit-transform: rotate(180deg);transform: rotate(180deg);}*/
}
<div id="line"></div>
Here is the animation. I've added animation-fill-mode: forwards;, and a 100% state. I've also made the top line wider so we can see the animation:
#line {
border: 1px solid #8a32cb;
border-top-width:5px;
height: 300px;
width: 50%;
-webkit-transform: rotate(0deg);transform: rotate(0deg);
transition: 1s;-webkit-transition: 1s;
/*animation: spin 2s ease-in-out forward;*/
animation-name: spin;
animation-duration: 2s;
animation-delay: .7s;
animation-direction: forward;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes spin {
25% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
100% {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
}
<div id="line"></div>
I have two CSS animations in the same element and they're conflicting with each other. I've seen other answers that say you can assign multiple animations if they are separated by a comma, but those examples are for shorthand animation assignments. Would there be any way to get both of those animations to work together?:
.whiteLayer{
-webkit-transform: scale(0);
transform: scale(0);
margin-top: 50px;
border-radius: 50%;
width: 475px;
height: 475px;
border: 1px dashed white;
position: absolute;
top: 12px;
margin-left: 8px;
-webkit-animation-name: spin;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-animation-delay: 2s;
animation-name: spin;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 2s;
-webkit-animation-name: intro;
-webkit-animation-duration: .2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: .2s;
-webkit-animation-fill-mode:forwards;
animation-name: intro;
animation-duration: .2s;
animation-timing-function: linear;
animation-delay: .2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes intro{
from {transform: scale(0);}
to {transform: scale(1);}
}
#keyframes intro {
from {transform: scale(0);}
to {transform: scale(1);}
Please let me know. Thanks!
My solution to this would be that I create two divs (or one additional div to wrap your current element) and set the other one to the first and so. They would be on separate div's but still looking like they're in just one.
Might need some margin / padding probing to get it all lined up though.
In your above case the animation at the bottom will override the animation on the top. That's the way how css works. If you want to have both animation working together you need to apply both transform properties together in a single animation i.e apply both scale and rotate in the same animation.
I have setup a demo in this jsfiddle - http://jsfiddle.net/gkueL/1/
.whiteLayer{
background-color:red;
-webkit-transform: scale(0);
margin-top: 5px;
width: 275px;
height: 275px;
border: 1px dashed white;
position: absolute;
margin-left: 8px;
-webkit-animation-name: spin;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-animation-delay: 0.5s;
}
#-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg) scale(0);}
to {-webkit-transform: rotate(360deg) scale(1);}
}
I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome.
The fiddle:
http://jsfiddle.net/9Ryvs/1/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
<div></div>
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin)
Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info
Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the #keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Demo :
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div></div>
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
You haven't specified any keyframes. I made it work here.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation: spin 4s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
You can actually do lots of really cool stuff with this. Here is one I made earlier.
:)
N.B. You can skip having to write out all the prefixes if you use -prefix-free.
As of latest Chrome/FF and on IE11 there's no need for -ms/-moz/-webkit prefix.
Here's a shorter code (based on previous answers):
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
/* The animation part: */
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Live Demo: http://jsfiddle.net/9Ryvs/3057/
HTML with font-awesome glyphicon.
<span class="fa fa-spinner spin"></span>
CSS
#-moz-keyframes spin {
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
to {transform:rotate(360deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}
The only answer which gives the correct 359deg:
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
&.active {
animation: spin 1s linear infinite;
}
Here's a useful gradient so you can prove it is spinning (if its a circle):
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
To rotate, you can use key frames and a transform.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
Example
For the sake of completion, here's a Sass / Compass example which really shortens the code, the compiled CSS will include the necessary prefixes etc.
div
margin: 20px
width: 100px
height: 100px
background: #f00
+animation(spin 40000ms infinite linear)
+keyframes(spin)
from
+transform(rotate(0deg))
to
+transform(rotate(360deg))
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
this will make you to answer the question
For the guys who still search some cool and easy spinner, we have multiple exemples of spinner on fontawesome site : https://fontawesome.com/v4.7.0/examples/
You just have to inspect the spinner you want with your debugger and copy the css styles.
I've come across this post//
Slide out text from an image using CSS on hover
The CSS works perfectly, except I would like for the animation to stop after it's rotated once.
Is this possible? If so how can I accomplish this?
HTML:
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(180deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.srch_btn:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
Change animation-iteration-count: infinite to 2.