Front-end visual optimization (three) CSS animation transition, transition transition properties

Transform3d will not do it. It is not what you imagined at all. It will not generate a visual 3d object for you. It is just a 3d feeling when a 2d object is flipped. What does it feel like: the proximal side is long and the distal end is short. There are even sawtooths, compatibility is not good, bells and whistles, and beautiful.

The main summary of the video is great. Take a screenshot directly

Insert picture description here

Introduction to the four elements

  • Transition properties
    What are transition properties, color: xxxx, font-size: xxx, transform: xxxx
    color, font-size, transform are the properties you want to transition, you specify them, and they follow your rules during transition
  • Transition time
    can be set in seconds or milliseconds
  • Transition function
    可能会有兼容问题,注意下浏览器前缀的使用
    ease: default, slow-fast-slow transition effect
    liner: uniform speed
    ease-in: acceleration
    ease-out: deceleration
    ease-in-out: slow-acceleration-deceleration-slow. It's similar to ease. . . Hard to feel
  • Delay time
    can be set in seconds or milliseconds

use

transition:all 3s 1s linear;

The order can be chaotic, but the first time is the transition time.

 ransition:width 2s, height 2s, background-color 2s, transform 2s;

Can also be like this
记得!!这个是写在元素本体上的,而不是本体:hover上

Guess you like

Origin blog.csdn.net/weixin_45629623/article/details/111596355