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>
Related
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/
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 this code that spins an image when hovering:
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: .15s;
animation-iteration-count: 1;
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);
}
}
http://jsfiddle.net/79FHN/1/
I want it to spin to the other direction when un-hovering.
How can I do this?
I can refactor your code to great extent, all you need is
Demo
img {
-webkit-transition: 1s linear;
transition: 1s linear;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
The issue with your code was, that you were using #keyframes which are nothing but animation, so once it triggers, you need to write a separate keyframe for reversing. As your animation was not so complex, I preferred using simple CSS3 properties to get the job done.
If you feel the animation nudges your icon or you deliberately want to nudge on hover, you can use transform-origin property.
Thanks to #Second Rikudo for pointing out the linear issue.
I want to have a css-coded animated rotating svg image. I have no idea how to do that. At the end it has to look exactly like this: http://baveltje.com/logo/logo.html. I am completely new to css. The rotating svg's are gear1.svg and gear2.svg. I want them to rotate 360 degres for infinite time and I want to call them <.div class="gear1"> and gear2.. Is it possible to let it look exactly like the logo does in the link, but rotating?
I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!
Thanks in advance!
Code:
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);
}
}
Here is your original animation css (I have removed prefixes to keep it simple):
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gear you should add:
animation-iteration-count to infinite to keep it rolling
transform-origin to center of your div 50% 50% to get gear rolling around itself
display to inline-block
Result:
#gear{
animation-name: ckw;
animation-duration: 15.5s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
/* <--- */
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
And of course add correct prefixes.
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.