其他分享
首页 > 其他分享> > CSS动画

CSS动画

作者:互联网

浏览器渲染原理

  1. 根据HTML构建HTML数(DOM)
  2. 根据 CSS 构建 CSS树(CSSOM)
  3. 将两棵树合并成一颗渲染树(rendertree)
  4. Layout布局(文档流、盒模型、计算大小和位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose 合成(根据层叠关系展示画面)
    image

三种更新方式

  1. JS/CSS>style>layout>paint>composite
  2. 无layout:JS/CSS>style>paint>composite
  3. 无layout,无paint:JS/CSS>style>composite

参考

https://csstriggers.com/

CSS 动画的两种做法

1-transform

1-transtion

/* Apply to 1 property /
/
property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function() */
transition: margin-right 4s ease-in-out;

/* property name(属性名) | duration(持续时间:时长) | timing function(过渡方式) | delay(延迟时间) */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

不是所有的属性都能过渡
过渡必须要有起始

2-animation

/* @keyframes(关键帧) duration(持续时长) | timing-function(过渡方式) | delay |
iteration(循环)-count(次数) | direction | fill-mode(填充模式) | play-state(播放状态:是否暂停) | name */
animation: 3s ease-in 1s 2 reverse(反方向) both paused(指定暂定动画)) slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

标签:动画,1s,right,name,transition,duration,CSS
来源: https://www.cnblogs.com/kaqyin/p/15578659.html