classification :
CSS3 Animation properties :
Common properties
Animation library :
grammar
transition: property duration timing-function delay;
The attribute name property
Transition time duration
Time function timing-function
Delay time delay
2、 Be careful :
display Unable to join transition Use it together
transition Try not to follow all
Common flicker can persp and backface-visibility
.box{
width: 200px;
height: 200px;
background-color: #000000;
margin-bottom: 20px;
}
// The mouse changes the width
.trasition-1{
// transition: width 2s linear 1s;
transition: width 2s linear;
&:hover{
width: 500px;
}
}
// The mouse rotates
.trasition-2{
transition: transform 2s ease-out;
&:hover{
transform: rotate(45deg);
}
}
grammar
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
The name of the animation (name)@keyframes
Transition time (duration)
Time function (timing-function)
Delay time (delay)
plays (iteration-count)
Play direction (direction) Take turns playing and playing backwards
Stop playing state (fill-mode)
Whether to suspend (play-state)
.box{
width: 200px;
height: 200px;
background-color: #000000;
margin-bottom: 20px;
}
// The mouse moves through
.animation-1{
&:hover{
animation: move 2s linear;
}
}
@keyframes move{
100%{
transform: translateX(200px);
}
}
// The ball rolls
.animation-2{
border-radius: 50%;
animation: jump 2s cubic-bezier(0.4,-0.04, 0.94, 0.29) infinite;
}
@keyframes jump{
0%{
transform: translateX(0px);
}
40%{
transform: translateX(200px);
}
60%{
transform: translateX(200px);
clip-path: ellipse(50% 50% at 50% 50%);
}
100%{
transform: translateX(0px);
clip-path: ellipse(50% 45% at 50% 48%);
}
}
// Chrysanthemum rotation
.animation-3{
width: 100px;
height: 111px;
animation: round 1s steps(12) infinite;
background: url(./loading.jpg) no-repeat;
}
@keyframes round{
100%{
transform: rotate(360deg);
}
}
Time function : Manage the speed curve for animation playback in unit frames
The mathematical function of cubic Bessel function
Default :
steps It works for every keyframe , Not the whole time
animationstart
animationend
trasitionend
animationitertion
// Transition event monitoring
let transitionend = ()=>{
console.log("transitionend");
}
let $box = document.querySelector('.trasition-1');
// IE FireFox Has supported
$box.addEventListener("transitionend", transitionend);
// 360 safari chrome It needs to be compatible
$box.addEventListener("WebkitTransitionend", transitionend);