How to adjust the start time (Delay) animation time and movement width of Animate.css
How to adjust the start time (Delay) animation time and movement width of Animate.css, Aninmate.css is convenient for adding a little animation, but when you actually import it, you may want to adjust the animation start timing, animation time, animation movement width, etc.
The following uses an animation called bounceIn, but you want to make the animation range a little more modest.
Test (default)
Test (after adjustment)
How to adjust the start time (Delay) animation time and movement width of Animate.css, How to use
Using Animate.css is pretty simple.
Download the animate.css file from the Animate.css site.
Load the downloaded CSS file
How to adjust the start time (Delay) animation time and movement width of Animate.css, <link rel = “stylesheet” href = “animate.min.css”>
Add the animation name and animated class to the animated part
Example: If you want to add bounceIn
<h1 class = “bounceIn animated”> test </ h1>
Adjustment method
Adjustment of start time and animation time
To adjust the animation start time and animation time, just add the following class.
(Example)
How to adjust the start time (Delay) animation time and movement width of Animate.css, <p class = “bounceIn animated” id = “animate”> Test </ p> class = “bounceIn animated” id = “animate” > test </ p>
CSS
p # animate {#animate {
Animation – Duration : 2S ; / * animation of the time * /
Animation – Delay : 2S ; / * animation start time * /
animation – Iteration – Count : Infinite ; / * animation number of repetitions of the * /
}
Adjustment of operating width
To adjust the operation width, you need to modify the CSS file directly or copy the class to be used and overwrite the CSS.
When you open animate.css, you will find the following line.
@ -webkit-keyframes bounceIn {}
@keyframes bounceIn {}
These two are animating bounce In.
@ -webkit- is called a vendor prefix and needs to be modified if it supports iOS 8 or lower or Android 4.4.4 or lower. If you don’t need it, you can delete the whole source.
The following is written in bounceIn {}.
from,from ,
20 %,
40 %,
60 %,
80 %,
to {
– Webkit – Animation – Timing – Function : Cubic – Bezier ( 0.215 , 0.61 , 0.355 , 1 );
Animation – Timing – Function : Cubic – Bezier ( 0.215 , 0.61 , 0.355 , 1 );
}
0 % {
opacity : 0 ;
– Webkit – Transform : Scale3d ( 0.3 , 0.3 , 0.3 );
transform : scale3d ( 0.3 , 0.3 , 0.3 );
}
20 % {
– Webkit – Transform : Scale3d ( 1.1 , 1.1 , 1.1 );
transform : scale3d ( 1.1 , 1.1 , 1.1 );
}
40 % {
— Webkit – Transform : Scale3d ( 0.9 , 0.9 , 0.9 );
transform : scale3d ( 0.9 , 0.9 , 0.9 );
}
60 % {
opacity : 1 ;
– Webkit – Transform : Scale3d ( 1.03 , 1.03 , 1.03 );
transform : scale3d ( 1.03 , 1.03 , 1.03 );
}
80 % {
– Webkit – Transform : Scale3d ( 0.97 , 0.97 , 0.97 );
transform : scale3d ( 0.97 , 0.97 , 0.97) );
}
to {
opacity : 1 ;
– Webkit – Transform : Scale3d ( 1 , 1 , 1 );
transform : scale3d ( 1 , 1 , 1 );
}
From the start of the animation from (0%) to the end of the animation to (100%), the behavior is described with transform: scale3d (1,1,1) ;.
scale3d () is a CSS function that scales in space.
Syntax: scale3d (sx, sy, sz)
sx represents
the abscissa of the scaling vector
sy represents
the vertical coordinates of the scaling vector
sz represents
the Z component of the scaling vector
If you want to reduce the width of the animation without worrying about the details, move the number closer to 1, and if you want to widen the width of the animation, move the number away from 1.
Try replacing the numbers that are actually comfortable.
(Example)
How to adjust the start time (Delay) animation time and movement width of Animate.css, @keyframes bounceIn {
from ,
20 %,
40 %,
60 %,
80 %,
to {
– webkit – animation – timing – function : cubic – bezier ( 0.215 , 0.61 , 0.355 , 1 );
Animation – Timing – Function : Cubic – Bezier ( 0.215 , 0.61 , 0.355 , 1 );
}
0 % {
opacity : 0 ;
– Webkit – Transform : Scale3d ( 0.98 , 0.98 , 0.98 );
transform : scale3d ( 0.98 , 0.98 , 0.98 );
}
20 % {
– Webkit – Transform : Scale3d ( 1.02 , 1.02 , 1.02 );
transform : scale3d ( 1.02 , 1.02 , 1.02 );
}
40 % {
– Webkit – Transform : Scale3d ( 0.99 , 0.99 , 0.99 );
transform : scale3d ( 0.99 , 0.99 , 0.99 );
}
60 % {
opacity : 1 ;
– Webkit – Transform : Scale3d ( 1.01 , 1.01 , 1.01 );
transform : scale3d ( 1.01 , 1.01 , 1.01 );
}
80 % {
– Webkit – Transform : Scale3d ( 0.99 , 0.99 , 0.99 );
transform : scale3d ( 0.99 , 0.99 , 0.99 );
}
to {
opacity : 1 ;
– Webkit – Transform : Scale3d ( 1 , 1 , 1 );
transform : scale3d ( 1 , 1 , 1 );
}
}
Test (default)
How to adjust the start time (Delay) animation time and movement width of Animate.css, Test (after adjustment)
