I am trying to make an animation, where few elements would appear bigger than they are and shrink back to normal.
Here's what I've got:
One of the elements
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
And keyframe
#keyframes ani {
0% {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
HTML
<div id="wrapper">
<img id="element" src="img.svg">
<img id="element2" src="img2.svg">
</div>
The problem is that whenever the animation starts, elements appear as they never been rotated and rotates only after animation ends. How could I force them to rotate before the animation?
you should combine the rotation code with transform in animation as well. basically rotate and scale both are the values of transform property, so if you only use scale in the animation, it will override rotate value and will only show the scale.
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(82deg);
-webkit-transform: scale(1.5) rotate(82deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
<div id="wrapper">
<img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>
You need to move your rotate into the keyframes:
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(0deg);
-webkit-transform: scale(1.5) rotate(0deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
Related
I have the following code for an image of a plane to come in from the left hand side of the page, land... ride on straight for 800px then take off again off the opposite side of the page.
But what is getting to me is the jerkiness between each percentage.
is there a away for it to smooth out the transitions between keyframes.
#keyframes plane-right {
0% {
visibility:visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility:visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility:visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility:visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
Add animation duration and animation timing-function to control the length of the animation and the timing (smoothness).
.plane-right-div {
width: 100px;
height: 70px;
background-color: #bada55;
border-radius: 5px;
animation-name: plane-right;
animation-duration: 6s;
animation-timing-function: ease;
}
#keyframes plane-right {
0% {
visibility: visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility: visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility: visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility: visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
<div class="plane-right-div"></div>
Add following animation-timing property to your image tag, this will help
transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
I can not play several animations one after the other with a "fluid" effect:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
Am I doing something wrong? I want to keep the keyframes separate.
You may need to consider forwards on the second one to keep its last state because actually when both animations ends your element get back to the inital value of the scale transform which is scale(1) (to be more precise it's transform:none)
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
UPDATE
The waiting time is due to the animation-timing-function used which is ease for both and this mean that you will have an ease-out (slow at the end) and ease-in (slow at the start) which create this behavior of pausing between both animations. If you change the first one to ease-in and the last one to ease-out you won't have this issue.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
Your pulse animation ends at scale 1.1, and then your circle snaps back to scale 1. Maybe the pulse keyframes should be as follows:
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
In the snippet below you see no snapping, but maybe this isn't the effect you were looking for?
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
You need a short pulse at the end when your circle is scaled to 1, this is your fluid effect I presume.
Rather than having to different animations, why don't we tweak the keyframes in the zoomIn animation a little bit.
HTML:
<div id="circle"></div>
CSS:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 0.4s ease-out;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Hope this helps.
the only animation is 'Transform', it is best to use a 'timing function' customization, I recommend utilities 'Cubic-bezier' go to this website http://cubic-bezier.com and practice. read before something about bezier curve.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
UPDATE
or this other 'timing-function'
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
height: 100px;
width: 100px;
animation-fill-mode: forwards; /* */
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
I'm trying to rotate and scale something at the same time with keyframes, but I can't to get it correct without stopping after each step.
I tried it with font-size, but a smarter human being told me to change it to scale, but he won't help me.
body {
position: relative;
}
.plus {
position: absolute;
font-style: normal;
font-size: 30px;
font-family: monospace;
font-weight: bold;
transform-origin: 50% 50%;
animation: transform infinite 3s;
transition: transform 3s ease;
}
#keyframes transform {
0% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(0.7) rotate(20deg);
}
50% {
transform: scale(0.4);
}
75% {
transform: scale(0.7) rotate(-20deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
<body>
<div class="plus">
+
</div>
</body>
It's not stopping, it's easing (slowing down at the end).
You don't need transition: transform 3s ease; and you don't want the "ease" for this animation.
You have to set it to linear: animation-timing-function: linear;
And yes, don't animate font-size :D
I am trying to auto rotate an image after ever 5 seconds from css. My code is working but only on hover but I want on both hover and without hover. So far I have done is given below.
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
<div class="circle-border">
<img class="img-circle" src="images/web.jpg" alt="service 1">
</div>
Thanks in advance
You need an animation not a transtion.
CSS Animations # MDN
This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.
div {
width: 100px;
height: 100px;
background: #663399;
margin: 1em auto;
-webkit-animation-name: spinner;
animation-name: spinner;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div></div>
I used Javascrit to do it however it's still can made with css alone
but maybe usefull, hope it can help
var circle = document.getElementById("test");
if (circle.classList.contains("move")) {
setInterval(function () {
"use strict";
circle.classList.add("move");
}, 2000);
setInterval(function () {
"use strict";
circle.classList.remove("move");
}, 5000);
}
.circle-border {
width:100px;
height:100px;
background-color:#F00;
}
.move {
animation: circle .9s ease 1;
}
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
#keyframes circle {
0% {transform:rotate(0)}
100% { transform:rotate(720deg)}
}
<div id="test" class="circle-border move">
</div>
I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:
HTML:
<div class="box"></div>
CSS:
body {
padding: 60px;
}
.box {
width: 100px;
height: 100px;
background-color: black;
animation-name: fadeIn, fall, elastic;
animation-timing-function: ease, ease-in, ease-out;
animation-duration: 1s, 0.5s, 0.5s;
animation-delay: 0s, 0s, 0.5s;
animation-fill-mode: forwards, forwards, forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fall {
0% { transform: translateY(-100px); }
100% { transform: translateY(0px); }
}
#keyframes elastic {
0% { transform: translateY(0px); }
20% { transform: translateY(60px); }
40% { transform: translateY(-20px); }
60% { transform: translateY(10px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.