LuckyWinty / fe-weekly-questions

A pro to record some interview questions every week...
MIT License
341 stars 34 forks source link

说说你对CSS动画的理解 #60

Open LuckyWinty opened 4 years ago

LuckyWinty commented 4 years ago

概述

需求中常见的css3动画一般有补间动画(又叫“关键帧动画”)和逐帧动画两种,下面分别介绍:

  1. 补间动画/关键帧动画: 常用于实现位移、颜色(透明度)、大小、旋转、倾斜等变化。一般有Transitions和Keyframes animation两种方法实现补间动画。

Transitions:用于实现简单的动画,只有起始两帧过渡。多用于页面的交互操作,使交互效果更生动活泼。

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。 这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

Keyframes animation:用于实现较为复杂的动画,一般关键帧较多。

设置动画的关键帧规则。 animation的timing-function设置为ease、linear或cubic-bezier,它会在每个关键帧之间插入补间动画,产生具有连贯性的动画。

  1. 逐帧动画:

animation的timing-function默认值为ease,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。 除了ease、linear、cubic-bezier之类的过渡函数都会为其插入补间。 有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。

transition的主要api

    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;

transition的优点在于简单易用,但是它有几个很大的局限。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

animation的主要api

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

keyframes的写法

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。

steps讲解:https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

JaykeyGuo commented 4 years ago

cubic-bezier可以参考这个 https://cubic-bezier.com/#25,.1,.25,1 ease和liner也可以用这个表示,分别是cubic-bezier(.25,.1,.25,1)和cubic-bezier(0,0,1,1)