css3 Animation

classification ：

• Frame animation
• Transition animations

CSS3 Animation properties ：

• transition
• animation

Common properties

• transform

Animation library ：

• swiper
• vue-transition
• svg
• animate.css

transition transition

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);
}
}

animation Animation

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

Time function ： Manage the speed curve for animation playback in unit frames
The mathematical function of cubic Bessel function
Default ：

• linear uniform
• ease
• ease-in
• ease-out
• ease-in-out

steps It works for every keyframe , Not the whole time

Transition and animation in js Monitoring in

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);