CSS动画一些笔记

最新推荐文章于 2024-08-28 17:34:02 发布

lihongxun945

最新推荐文章于 2024-08-28 17:34:02 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css 动画

本文链接：https://blog.csdn.net/lihongxun945/article/details/38797293

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

通常我们所说的CSS动画包括三种类型： transform, transition 和 animation。
他们三者的作用是完全不同的

transform: 可以理解为对元素可视化模型的变形，这个形变可以是缩放、旋转、倾斜、平移等。
transition: 当某些CSS属性发生变化的时候执行一个渐变动画，比如改变颜色的时候可以有一个颜色渐变的过程。
animation: 这个才是真正意义上的动画，可以按关键帧来定义动画每一帧的效果。

1 transform

这个是最好理解的，可以翻译为变形（变形金刚不就是transformer么）。这个不像transition和animation，是没有动画执行的过程的。语法如下：
transform: <transform-function> [transform-function]* | none;
你可以用空格形式来一次定义多个transform效果。
默认的所有效果都是以元素的中心点为原点进行的，当然你可以通过tranform-origin来改变这个设置。

transform-function可以是以下值：
rotate(angle): 旋转，顺时针旋转一定的角度，比如 rotate(30deg)
scale(sx, [sy]): 缩放，可以指定x轴和y轴的缩放比例，如果没有指定y则和x一样。当然，可以通过 scaleX 和 scaleY来单独设定。
skew(ax, [ay]): 倾斜，指定x和y轴的倾斜角度，如果没有指定y，则y轴不会倾斜。同样可以通过 skewX 和 skewY 来单独设定。
translate(tx, [ty]): 平移，同样是可以指定x和y，如果没有指定y，则默认是0。同样可以通过 translateX 和 translateY来单独指定。
matrix(a,b,c,d,e,f): 矩阵，对图片进行矩阵变换。

2 transition

当CSS属性改变时执行一个动画，所以这个transition是需要一个触发动作的，即改变CSS属性。可以通过任何方式导致CSS属性改变来触发transition，比如使用 :hover 之类的伪类，通过添加class，或者直接通过JS来修改属性值都是可以的。
那么定义transition动画需要哪几个参数呢，显然你先需要指定一个属性名称，比如color，然后你要定义动画时间函数（一个加速度函数），然后还要定义动画持续时间，有这三个基本就够了，不过还有动画延迟和重复次数等可以定义。
比如： transition: color ease-in 0.5 1; 表示当颜色改变时执行动画，时间函数是一个加速函数（越来越快），持续时间 0.5秒，延迟1秒才开始动画。

显然，并不是所有的属性都可以做动画的，比如 display: inline;这中改变显然没有办法做动画。关于那些属性可以做动画，你可以参考这个列表： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

动画的时间函数可以是： ease, ease-in, ease-out, linear等。
持续时间和延迟时间都是以秒为单位的。
transition 更多文档见这里： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

3 animation

通过关键帧来做动画，可以指定每一帧的效果，因此这个能实现很复杂的CSS动画效果。和transition 不同，animation没有一个触发动作，所说CSS样式解析到你的animation定义的时候动画就会触发。

animation分为两部分来定义，一个是定义动画执行的过程，通过关键帧（keyframe）来定义，另外一个是在元素中声明使用动画，并且定义动画的时间等参数。

首先，你需要通过关键帧定义一个动画效果并起一个名字，后面可以通过这个名字使用这个效果。比如：

@keyframe slidein {
     from {
          margin-left: 100%;
     }
     50% {
          margin-left: 50%;
     }
     to {
          margin-left: 0;
     }
}

定义了一个名为 slidein 的动画效果，它里面定义了三帧的具体效果，每一帧都是通过百分比来定义的，这个百分比就是动画时间的百分比。其中from和to你可以认为是 0%和 100%的缩写。
当然你可以定义更多帧，比如下面这样就有一个减速的效果：

@keyframe slidein {
     from {
          margin-left: 100%;
     }
     20% {
           margin-left: 50%;
     }
     50% {
          margin-left: 80%;
     }
     to {
          margin-left: 0;
     }
}

因为时间 20%时候 margin已经移动了 50%，所以这个动画看上去会有一个慢慢减速的效果。

定义好动画效果之后，我们就可以在CSS中通过animation属性来使用这个效果，注意到上面的定义中都是百分比的，所以在使用的时候你需要制定动画持续的时间。比如：

.my-slidein {
animation-name: slidein;
animation-duration: 1;
}

当你给一个元素加上 my-slidein class之后，它就会立刻指定一个滑动的动画。
需要注意的是，animation动画执行完成之后，其中定义的所有属性修改都会被重置。即animation不会影响最终的样式。
关于animation更多说明见这里： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations