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>
Related
Not really aware how to use CSS animations, but I found something that works perfectly for my site. The one issue, is it's way too small. Anyone have any advice for what I would need to tinker with to expand the size? I actually see where to increase the size/scale towards the end of the animation, which is made obvious with the scale attributes. What I don't know, is controlling the size before the animation causes it to expand. Thank you very much. -Wilson
Ex:
http://www.wilsonschlamme.com/animationtest.html
css:
.overlay-loader .loader-icon {
position: absolute;
top: 50%;
left: 44%;
color: #42f498;
}
.overlay-loader .loader-icon.spinning-cog {
-webkit-animation: spinning-cog 1.3s infinite ease;
-moz-animation: spinning-cog 1.3s infinite ease;
-ms-animation: spinning-cog 1.3s infinite ease;
-o-animation: spinning-cog 1.3s infinite ease;
animation: spinning-cog 1.3s infinite ease;
background-color: #42f498;
}
#-webkit-keyframes spinning-cog {
0% { -webkit-transform: rotate(0deg) }
20% { -webkit-transform: rotate(-45deg) }
100% { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes spinning-cog {
0% { -moz-transform: rotate(0deg) }
20% { -moz-transform: rotate(-45deg) }
100% { -moz-transform: rotate(360deg) }
}
#-o-keyframes spinning-cog {
0% { -o-transform: rotate(0deg) }
20% { -o-transform: rotate(-45deg) }
100% { -o-transform: rotate(360deg) }
}
#keyframes spinning-cog {
0% { transform: rotate(0deg) }
20% { transform: rotate(-45deg) }
100% { transform: rotate(360deg) }
}
#-webkit-keyframes shrinking-cog {
0% { -webkit-transform: scale(2) }
20% { -webkit-transform: scale(2.2) }
100% { -webkit-transform: scale(1) }
}
#-moz-keyframes shrinking-cog {
0% { -moz-transform: scale(2) }
20% { -moz-transform: scale(2.2) }
100% { -moz-transform: scale(1) }
}
#-o-keyframes shrinking-cog {
0% { -o-transform: scale(2) }
20% { -o-transform: scale(2.2) }
100% { -o-transform: scale(1) }
}
#keyframes shrinking-cog {
0% { transform: scale(2) }
20% { transform: scale(2.2) }
100% { transform: scale(0) }
}
.overlay-loader .loader-icon.shrinking-cog {
-webkit-animation: shrinking-cog .3s 1 ease forwards;
-moz-animation: shrinking-cog .3s 1 ease forwards;
-ms-animation: shrinking-cog .3s 1 ease forwards;
-o-animation: shrinking-cog .3s 1 ease forwards;
animation: shrinking-cog .3s 1 ease forwards;
background-color: #42f498;
}
If you want it to be big from the start of the animation, add scale to spinning-cog animation. do this to all prefixes (change x to what scale you want)
#keyframes spinning-cog {
0% { transform: rotate(0deg) scale(x)}
20% { transform: rotate(-45deg) scale(x)}
100% { transform: rotate(360deg) scale(x)}
}
This rotate animation does not work in mozila firefox but in google chrome, it is working properly. Actually this problem only occurs in absolute and relative blocks.In general cases this animation work properly in any browser. Please help..
My css codes are given below.
css code :
.gear1{
display:block;
width:64px;
height:64px;
position:absolute;
left:0;
bottom:0;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 3s;
-o-animation-name: rotate;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 3s;
-ms-animation-name: rotate;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 3s;
animation-name:rotate;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-duration:3s;}
Css Animation :
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-o-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-ms-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
This is because you are using the wrong vendor prefixes in your keyframe declaration. You need to use the same vendor (for transform) prefix of your #key-{vendor}-keyframes.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
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'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 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.