β

CSS Animation初探

稀有猿诉 289 阅读
 

动画在交互设计中是一个十分能加分的东西,用以平滑过度,会让用户体验上几个台阶。对于Web开发也是如此,恰当的使用动画可以让网页使用起来更加的用户友好。这里就来探讨一下CSS中一些动画的实现方式,初识前端,不足之处敬请指正。

使用transition来实现动画

transition 是CSS3中的属性,它的作用就是让CSS的属性以平滑的渐变动画方式来展现而非突然变化,因此可以用来实现一些简单动画。

语法:transition: property duration timing-function delay

Value Description
property 要平滑过度的CSS属性
duration 平滑过度的时长(动画时长)
timing-function 定义过度效果的速度曲线
delay 过度效果何时开始

像其他的CSS写法一样,这四个值也可以单独指定:

transition的特点

更多关于transition的使用请参考 这篇文章 ,相当的详细。

使用transform来实现动画

transform 是CSS3中新加的属性,用以对元素进行2D或3D的变换,这里变换的意思是几何变换,包括旋转,缩放,移动和倾斜旋转等。

用这些来指定是进行什么变换,就像名字所指的,translate是进行2D移动,如translate(10, 11),translate3d是进行3d移动, 如translate3d(1, 0, 10),后面带坐标轴就是在某一特定方向上移动,其他几个类似。

需要注意几点:

使用key-frame来实现动画

@keyframe 规则是专门用来做动画的,它可以指定具体到某一帧的状态是什么样子的,以整数百分比来指定帧数,再给定CSS属性,就组成了一组状态的变化。比如:

@keyframes mymove {
%   {top: 0px;}
%  {top: 200px;}
%  {top: 100px;}
%  {top: 200px;}
% {top: 0px;}
}

就是一个简单的移动动画。 具体的可以参考 这篇文章 ,讲述的还是很清楚的。

如何选择

一般来说,如果是移动,旋转或者缩放就使用transform就够了。如果要变化颜色,或者背景色或者可见度,就使用transition就好了。如果是复杂的动画,比如控制多个元素同时做动画,或者动画本身比较复杂还是使用@keyframes。

流行的动画库

这个文章 列的很详细,就不再单独的列出来了。如果你知道有其他的库也请与我分享。

一些不错的资源和网站

参考

 
作者:稀有猿诉
原文地址:CSS Animation初探, 感谢原作者分享。