I know how to scale from 1 to 2:
transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);
But I need from 0.1 to 1. Is there any way to do it?
You have two options, using animation or transition, both will work as anticipated as long as you specify the starting values. animation is typically the preferred option when you want more control over the intermediate keyframes, or the immediate application of an animation.
HTML
<div></div>
Using animation
div {
background:red;
height:100px;
width:100px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-animation: transformer 4s ease-in 0s 1;
animation: transformer 4s ease-in 0s 1;
}
#-webkit-keyframes transformer {
from {
-webkit-transform: rotate(0deg) scale(0.1);
}
to {
-webkit-transform: rotate(360deg) scale(2);
}
}
#keyframes transformer {
from {
transform: rotate(0deg) scale(0.1);
}
to {
transform: rotate(360deg) scale(2);
}
}
Using transition
div {
width:100px;
height:100px;
background:red;
transition: all 1s ease-in;
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
You need to specify transform: scale(0.1); on the element (don't forget vendor prefixes) before you scale it to 1.
See the example below:
FIDDLE
CSS:
div{
width:500px;
height:500px;
background:gold;
transition: all 1s ease-in-out;
-ms-transform: rotate(0deg) scale(0.1);
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover{
-ms-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
Related
I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out
Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.
Im playing around with css3 translateY and i'm not abel to stop the animation at the end.
HTML:
<ul id="nav" class="nav-ctn">
<li>About</li>
<li>Projects</li>
<li>Media</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
CSS:
.tr-up {
-moz-animation: tr-up 0.5s ease-in-out;
-o-animation: tr-up 0.5s ease-in-out;
-webkit-animation: tr-up 0.5s ease-in-out;
animation: tr-up 0.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-moz-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#-webkit-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
So far i have tried the solution form the following posts:
Stopping CSS3 KeyFrames Animation
Stop CSS3 animation jumping
Animation stop with css3
Stopping a CSS3 Animation on last frame
But non of them worked for me.
So what i am doing wrong?
HERES THE FIDDLE
Note: the tr-up class is dynamically added to the link characters.
Animations shouldn't work on inline elements so you need to change the default display property of the <span> tags to span{display:inline-block;} :
If you want to keep the underline on your menu items, you also need to add text-decoration:underline; to those span tags :
DEMO
Try the add iteration count
animation-iteration-count: 1;
It will be possible
I have a jsfiddle here - http://jsfiddle.net/w23v50h5/1/
div {
position: absolute;
left: 315px;
top: 143px;
width: 50px;
height: 50px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
}
#-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
#-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
I'm using css trasform to move an element in an oval shape.
I'd like the path the element is moving on to be a flatter oval shape.
I also like to scale the element so it's smaller at the top of the oval and larger at the bottom so it gives the impression of oval orbit going backwards and coming forwards.
Can anyone help to make the orbit flatter and scale the element.
you can use a % instead "from to" in your animation like this:
0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }
A jsfiddle implementation:
http://jsfiddle.net/jutmLgud/
Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.
HTML
<div class="box">
<img src="imagename.png" />
</div>
CSS
a {display: block;}
.animate {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
20% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover,
.bounce:focus {
-webkit-animation-name: bounce;
animation-name: bounce;
}
I've attached a jsfiddle of the result I'm getting.
http://jsfiddle.net/jordan911z/M3vZ2/
The animation-play-state property can pause or resume an animation. It accepts either:
running — the default; an animation plays as normal
paused — the animation is paused
#myelement:hover, #myelement:focus {
animation-play-state: paused;
}
See full tutorial on SitePoint.
Try add this to your CSS
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */
Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation?
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Below is the script for flip animation using keyframes
#keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip-animation {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
animation-iteration-count: infinite;
transition-timing-function: linear;
animation-duration: 4.5s;
}
Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/
There you go FIDDLE
Now you can play around with rotations on different axis.
for example,-webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.
.center {
width:300px;
margin:auto;
margin-top:100px;
-webkit-perspective:250px;
perspective:250px;
}
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}