In Chrome, I can run this this animation just fine:
.card {
height: 100px;
width: 100px;
background: red;
}
.cardSway {
-webkit-animation: cardSway 1s ease-in-out infinite;
-moz-animation: cardSway 1s ease-in-out infinite;
-o-animation: cardSway 1s ease-in-out infinite;
}
#-webkit-keyframes cardSway {
0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
#-moz-keyframes cardSway {
0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
#-o-keyframes cardSway {
0% {-o-transform: rotate(1deg) translate(-1px,0px);}
50% {-o-transform: rotate(-1deg) translate(1px,0px);}
100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}
But this animation doesn't work:
.card {
height: 100px;
width: 100px;
background: red;
}
.cardSway {
-webkit-animation: cardSway 1s ease-in-out infinite;
-moz-animation: cardSway 1s ease-in-out infinite;
-o-animation: cardSway 1s ease-in-out infinite;
animation: cardSway 1s ease-in-out infinite;
}
#-webkit-keyframes cardSway {
0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
#-moz-keyframes cardSway {
0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
#-o-keyframes cardSway {
0% {-o-transform: rotate(1deg) translate(-1px,0px);}
50% {-o-transform: rotate(-1deg) translate(1px,0px);}
100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}
#keyframes cardSway {
0% {transform: rotate(1deg) translate(-1px,0px);}
50% {transform: rotate(-1deg) translate(1px,0px);}
100% {transform: rotate(1deg) translate(-1px,0px);}
}
The only difference I can find is the presence of the generic keyframe selector is messing with the -webkit- prefixed code. Other Chrome users say it's working fine for them, so I thought it was a busted install. I've reinstalled and it's still a problem for me. Any ideas?
EDIT
Found the answer to my problem in this thread: https://code.google.com/p/chromium/issues/detail?id=331261
'Enable experimental Web Platform features' in chrome://flags caused the prefixing conflict. Disabling it fixed my problem. :)
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 have the following snippet of CSS:
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
header .spinner {
position: absolute;
width: 100%;
text-align: center;
margin: 0 auto;
left: 0;
-webkit-animation:spin 1s ease-out .5s;
-moz-animation:spin 1s ease-out .5s;
animation:spin 1s ease-out .5s;
transform-origin: 50%;
}
the animation runs fine, however the origin is slightly wrong making it look like the img is jumping when rotating.
i'm not to sure if its the bootstrap framework or that i'm missing something but this animation is meant to rotate various states of the letter Y.
h2 .rotateY, li .rotateY{
animation-iteration-count: 1;
animation-fill-mode:forwards; /*when the spec is finished*/
animation: animationFrames ease-in-out 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation: animationFrames ease-in-out 2s;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-moz-animation: animationFrames ease-in-out 2s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-o-animation: animationFrames ease-in-out 2s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards; /*IE 10+*/
-ms-animation: animationFrames ease-in-out 2s;
}
#keyframes animationFrames{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(180deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: rotate(180deg) ;
}
100% {
-o-transform: rotate(180deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(180deg) ;
}
100% {
-ms-transform: rotate(180deg) ;
}
}
the end result should be an upside-down Y after going through 180 degrees rotation.
i'm getting the animation working but after its ran, the Y snaps back to the correct orientation.
The reason for this upside-down Y is a design with typography. using this as an image is not practical.
incidentally, the respective html code for this issue, within a few divs, is:
<h2>H<span class="rotateY">Y</span>BRID</h2>
I'm trying to spin a world around its center - but cant seem to rotate it the correct way (around its own center axis)
Its hard to explain so I made a demo:
.world {
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}
#-webkit-keyframes spin1 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin1 {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes spin1 {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes spin1 {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
#-keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div>
Thanks for the help (working help will be credited in the final experiment)
you need to set the size of the element and specify the transform-origin property
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 256px;
height: 256px;
Example fiddle : http://jsfiddle.net/RbXRM/3/
You are not restricting the size of the div.
In fact you don't need the div at all, you can just apply the class to the image:
.world
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
display: block;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>
you need to spin only the img
.world img
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}
or modify display of div.world so it it shrinks on image (inline-block,inline-table,table) or even float it
I have this little animation but it does not behave properly on Firefox and it does not work at all on Explorer.
The idea is that when you hover on the gray DIV, the red DIV will animate.
On Firefox it runs only once when you reload the page and the cursor is hover on the gray area. If you want to make it work again it'll not animate. On chrome it works fine.
Oh, before I forget, the animation basics is from animate.css
http://jsfiddle.net/soporo123/8PDnA/5/
The HTML:
<div id="box">
<div id="button" class="bounceIn"></div>
</div>
The CSS:
#box {
width:400px;
height: 400px;
background-color:#999;
}
#button{
width:40px;
height:40px;
background-color:#F00;
}
#box:hover #button{
-webkit-animation-duration:1s;
-moz-animation-duration: 1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceIn {
0% {-webkit-transform: scale(.3);}
50% {-webkit-transform: scale(1.05);}
70% {-webkit-transform: scale(.9);}
100% {-webkit-transform: scale(1);}
}
#-moz-keyframes bounceIn {
0% {-moz-transform: scale(.3);}
50% {-moz-transform: scale(1.05);}
70% {-moz-transform: scale(.9);}
100% {-moz-transform: scale(1);}
}
#-o-keyframes bounceIn {
0% {-o-transform: scale(.3);}
50% {-o-transform: scale(1.05);}
70% {-o-transform: scale(.9);}
100% {-o-transform: scale(1);}
}
#keyframes bounceIn {
0% {transform: scale(.3);}
50% {transform: scale(1.05);}
70% {transform: scale(.9);}
100% {transform: scale(1);}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
Thanks in advance!!
There are no specific keyframes for moz, opera.
only use #-webkit-keyframes, same counts for animation-name.
Also do all in your hover, also the animation name.
CSS:
#box {
width:400px;
height: 400px;
background-color:#999;
}
#button{
width:40px;
height:40px;
background-color:#F00;
}
#box:hover #button{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceIn {
0% {-webkit-transform: scale(.3);}
50% {-webkit-transform: scale(1.05);}
70% {-webkit-transform: scale(.9);}
100% {-webkit-transform: scale(1);}
}
#keyframes bounceIn {
0% {-moz-transform: scale(.3); -o-transform: scale(.3); transform: scale(.3);}
50% {-moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);}
70% {-moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9);}
100% {-moz-transform: scale(1); -o-transform: scale(1); transform: scale(1);}
}
here your updated fiddle:
http://jsfiddle.net/8PDnA/10/
I didn't check if -o-transform exists, but just check it at w3c.