I have been trying to do a simple animation in CSS. The app logo is supposed to move 200px to the right and then return, smoothly, to it's original position. To do this I have written this for the animations:
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-fill-mode: forwards, none;
animation-name: move-right, move-left;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, ease-in-out;
}
#keyframes move-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(200px);
}
}
#keyframes move-left {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200px);
}
}
The problem I am having is that the first animation never actually plays, it just skips to the second.
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-name: move-right;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move-right {
0%{
transform: translateX(0%);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0px);
}
}
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-name: move-right;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move-right {
0%{
transform: translateX(0%);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0px);
}
}
Related
I've got the following animation. What I'm trying to do is when the animation reaches 50% I want it to stay there for 8 seconds.
If I change animation-duration: 3s; to 8s its is painfully slow.
And the transition-duration: 0.5s; doesn't seem to have any effect whatsoever.
I also tried adding animation-duration: 5s; to 50% {} but that doesn't do anything either.
Any suggestions on how to accomplish this?
html body div#size_cont div#dirt_specs {
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
transform: scale(1.4,1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
This is what you need to do in your animation frames:
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
And simply set your animation-duration to 11s.
Explanation:
Since your original animation was 3 seconds long, and your requirement is to include a 8 second delay in the middle, the entire animation becomes 11 seconds.
This means that 1.5s goes into the first transition, 8s goes into the frozen segment, and 1.5s goes into the ending transition.
With that said, you need to get the % at which 1.5s is done out of 11s, which 1.5/11 = 0.136, hence the 13.6%.
The 86.4% is calculated from the reverse, 1 - 1.5/11 = 0.864, and this is needed because you want to maintain this animation state up (i.e., the frozen segment) until the last 1.5s of the animation.
See below for a working example:
div {
height: 150px;
width: 150px;
background: red;
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
-o-animation-duration: 11s;
animation-duration: 11s;
transform: scale(1.4, 1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
<div></div>
I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
Try using keyframes.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
You need to use animation instead of transition. Transition effects are triggered on certain events, for example a click which adds a class or a hover.
div img {
animation: example 1s ease-in-out forwards;
}
#keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Now you would of course have to add the prefixes for that, webkit, moz, etc.
For basic knowledge about keyframe animation in css3:
http://www.w3schools.com/css/css3_animations.asp
I have an image and want to move it to the right and then to left animation using CSS. However, I wanted to combine the drive with transform: scaleX (-1); as below:
----image---> move to right
move to left with transform: scaleX (-1)
<------image----
I have the code:
<div class="logo">
<img src="resources/images/logo.png" alt=""/>
</div>
.logo{
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite ;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;}
#-webkit-keyframes example {
from {
margin-left: -200px;
transform: scaleX(1);
}
to {
margin-left: 200px;
transform: scaleX(-1);
}}
#keyframes example {
from {
margin-left: -200px;
transform: scaleX(1);
}
to {
margin-left: 200px;
transform: scaleX(-1);
}}
You can not get this effect with an alternated animation, because the back movement is different from the forward movement.
First, we need to set a single animation for both directions; then , you can add keyframes to control the reversal
div {
width: 200px;
height: 200px;
background-color: coral;
animation: custom 4s infinite;
}
#keyframes custom {
0% {
margin-left: -200px;
transform: scaleX(1);
}
49% {
margin-left: 200px;
transform: scaleX(1);
}
50% {
margin-left: 200px;
transform: scaleX(-1);
}
100% {
margin-left: -200px;
transform: scaleX(-1);
}
}
<div>TEST</div>
Is it possible to give an element multiple animations with different durations using CSS3 animations?
What I want to have eventually is have the ball to keep rotating after finishing. I know I could do this with giving multiple classes. But I would like to avoid that to prevent messy amount of classes.
(the Fiddle might not work on other browsers than Chrome, I just rapidly hacked it together)
Fiddle example of what I have currently http://jsfiddle.net/cchsh6om/2/
Here's the CSS
div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 46px;
position: relative;
background: #ddd;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
span{
position: absolute;
line-height: 100px;
left:48%;
}
#-ms-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-ms-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-ms-transform: rotate(-360deg); }
}
#-moz-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-moz-transform: rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px; -moz-transform: rotate(-360deg); }
}
#-webkit-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-webkit-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-webkit-transform: rotate(-360deg); }
}
#keyframes spin {
from {
opacity: 0;
margin-left: 200px;
transform:rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px;
transform:rotate(-360deg);
}
}
And the HTML
<div><span>=</span></div>
Yes, it's possibly, but your syntax is wrong. First of all, use short notation like animation: horizontal linear 8s infinite (for more information read this acticle). Then you you can apply multiple animations separated by comma on the same element:
animation: horizontal linear 8s infinite,
vertical ease-in-out 1.3s infinite alternate,
blink linear .7s infinite alternate,
rotation linear .4s infinite;
and define keyframes for each one of them:
#keyframes horizontal {
from {left: 0;}
to {left: 100%;}
}
#keyframes vertical {
from {top: 0;}
to {top: 200px;}
}
Finally, you can omit to -moz and -ms prefixes. -webkit-animation and animation works on all the modern browsers including mobile.
See my sample of multiple animation at CodePen, i've tested it on many platforms.
<img class="image" src="" alt="" width="120" height="120">
Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.
I guess something's wrong with the CSS below, as it just stays still.
.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;
-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 a demo. The correct animation CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
Some notes on your code:
You've nested the keyframes inside the .image rule, and that's incorrect
float:left won't work on absolutely positioned elements
Have a look at caniuse: IE10 doesn't need the -ms- prefix
To achieve the 360 degree rotation, here is the Working Solution.
The HTML:
<img class="image" src="your-image.png">
The CSS:
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
You have to hover on the image and you will get the 360 degree rotation effect.
PS: Add a -webkit- extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE
I have a rotating image using the same thing as you:
.knoop1 img{
position:absolute;
width:114px;
height:114px;
top:400px;
margin:0 auto;
margin-left:-195px;
z-index:0;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.knoop1:hover img{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
try this easy
.btn-circle span {
top: 0;
position: absolute;
font-size: 18px;
text-align: center;
text-decoration: none;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.btn-circle span :hover {
color :silver;
}
/* rotate 360 key for refresh btn */
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">↻</span></button>
if you want to flip image you can use it.
.image{
width: 100%;
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
}
#-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
#-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
#keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
The another method to rotate an object in the background using css3, check out the below css3 code here:
.floating-ball-model-3 > span {
animation-name: floating-ball-model-3;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: floating-ball-model-3;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: floating-ball-model-3;
-moz-animation-duration: 7s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: floating-ball-model-3;
-ms-animation-duration: 7s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: floating-ball-model-3;
-o-animation-duration: 7s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
#keyframes floating-ball-model-3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here this should help you
The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.
http://jsfiddle.net/xw89p/
var rotation = function (){
$("#image").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();
Where:
• t: current time,
• b: begInnIng value,
• c: change In value,
• d: duration,
• x: unused
No easing (linear easing):
function(x, t, b, c, d) { return b+(t/d)*c ; }