CSS Animation初探

jopen 9年前

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

CSS Animation初探

使用transition来实现动画

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

语法:transition: property duration timing-function delay

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

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

  • transition-property
  • transition-duration
  • transition-timing
  • transition-delay

transition的特点

  • 每当有transtion所指定的属性发生变化时,动画就会被触发,当然也受transition-delay的控制
  • transition生效的前提是元素在DOM中,所以对于属性display: none之类的是不会起作用的

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

使用transform来实现动画

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

  • translate,translate3d, translateX, translateY, translateZ
  • rotate, rotate3d, rotateX, rotateY, rotateZ
  • scale, scale3d, scaleX, scaleY, scaleZ
  • skew, skewX, skewY

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

需要注意几点:

  • transform只能定义几何变换,不能进行其他的,比如颜色,背景,透明度等非几何属性
  • 指定了transform会立即发生,所以要配合transition一起来使用 用transition来为transform指定时长,变化曲线以及delay的等关键的动画参数,才能成为真正的动画,否则transform也不会有动画效果。如:

    transform: translate3d(10, 20, 30);   transition: transform 300 ease-in;
  • translate移动的距离是相对于没有transform时的位置 比如说某元素原来位置是100, 100, 那么translate(10, 10),后的位置是110, 110,接着再translate(-10, -10),后位置是90, 90.
  • 还有就是对于translate最好使用translate3d,尽管可能只是一维的移动,translate3d要更平滑一些。

使用key-frame来实现动画

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

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

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

如何选择

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

流行的动画库

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

一些不错的资源和网站

参考

</div> 来自:http://toughcoder.net/blog/2015/05/04/introduction-to-css-animation/