css-animation, transition, deformation

Posted May 27, 20202 min read

! Important Github with 10k is an excellent framework

Animation
flash
js
css3 is highly efficient, absolutely not using js when you can use css3 to complete the animation

  1. Animation Definition-Let the professional do it
    Operation mode Key Frame
    @keyframes move(animation name) {

    from {

     left:0;

    }
    to {

     left:90%;

    }

}

@keyframes move(animation name) {

0 {
    left:0;
}
30%{
    left:90%;
}
50%{

}
100%{

}

}
2. Animation call

animation-name:animation name;
animation-duration:3s; animation duration
animation-fill-mode:forwards; the fill of the animation, the position of the last frame
    forwards
    backwards
animation-timing-function:linear; animation time curve
    linear
    ease
    ease-in
    steps
animation-delay:1s; animation delay
animation-iteration-count:infinite(endless); the number of times the animation repeats
animation-direction:alternate-reverse; animation running direction
animation-plat-state:running; running state of animation
  1. The enterprise application of animation [animate.css]official website: https://animate.style/
    In the enterprise development of the lion tiger, the definition of animation and the call of animation are generally handed over to a third party, and we simply add styles
  2. Install, use link to import
  3. Application
    Check the official website, add your favorite class to the element

Transition
transition-property:all; transition property

transition-duration:2s; duration

transition-delay:1s; delay time

transition-timing-function:linear; time curve

transition:property duration delay linear;

The difference between transition and animation

Animation is the need to define key frames \ [Can be more detailed control of multiple attributes and multiple time periods ]

The transition does not need to declare key frames, the transition can also control multiple attributes, but it can not control the multiple time periods in detail; the transition needs to have a trigger behavior, generally hover

Deformation
transform:deformation function;

rotate(xdeg) rotate deg means degree
rotateZ
rotateY
rotateX

scale(x, y) scaling function
skew() stretching function
translate() translation function