CSS动画:animation、transition、transform、translate傻傻分不清

作者:Vince

vince.xin/article/5acc34c06b78214ab8ac58bf

前言

在平时开发过程中,由于都是自己捣鼓玩的项目,并没有UI设计给我的设计图,更没有什么特效要求,导致对css动画一直都不是很熟悉,但是作为即将进入实习单位的萌新程序员,要时刻准备着设计师要求的各种动画,于是有了这一篇文章。

容易混淆的几个css属性

css属性很多,并且有些无论是字母的拼写还是字面上的意思,都容易混淆,比如我列出来的几个属性,是不是也混淆过你~

弄清楚这几个问题,我们就可以头脑清醒的状态下去学习css的动画

transition

什么叫过渡?字面意思上来讲,就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green),这是一个状态的转变,需要一种条件来触发这种转变,比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

先从一个简单的demo来看看transition的效果

transition

#box{

height:100px;

width:100px;

background:green;

transition:transform 1s ease-in1s;

}

#box:hover{

transform:rotate(180deg)scale(.5,.5);

}

效果:

我们来分析这一整个过程,首先transition给元素设置的过渡属性是transform,当鼠标移入元素时,元素的transform发生变化,那么这个时候就触发了transition,产生了动画,当鼠标移出时,transform又发生变化,这个时候还是会触发transition,产生动画,所以transition产生动画的条件是transition设置的property发生变化,这种动画的特点是需要“一个驱动力去触发”,有着以下几个不足:

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

是一次性的,不能重复发生,除非一再触发

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

语法:transition: property duration timing-function delay;

animation

在官方的介绍中这个属性是transition属性的扩展,弥补了transition的很多不足,我理解为animation是由多个transition的效果叠加,并且可操作性更强,能够做出复杂酷炫的效果(前提是你爱折腾),我们以一个例子来介绍animation的威力:

animation

.box{

height:100px;

width:100px;

border:15px solid black;

animation:changebox 1s ease-in-out 1s infinite alternate running forwards;

}

.box:hover{

animation-play-state:paused;

}

@keyframes changebox{

10%{

background:red;

}

50%{

width:80px;

}

70%{

border:15px solid yellow;

}

100%{

width:180px;

height:180px;

}

}

分析:

我们先来看看keyframes这个关键点,它定义了一个动画组合叫changebox,里面的10%,50%,70%,100%代表在变化中不同时间点的属性值,比如这个动画的总时间是1s,那么10%就是在0-0.1s中的动画,通过这个我们可以较精确的控制动画变化中任何一个时间点的属性效果,这大大提高了我们对动画的把控,是做复杂动画的基础,我们再回来看animation中整整八个值,是不是有点夸张,还没见过这么长的值,通过控制animation的每个值,控制动画变得非常灵活,我们来具体了解它的语法以及各个值代表着什么:

语法:animation: name duration timing-function delay iteration-count direction play-state fill-mode;

animation与transition 不同的是,keyframes提供更多的控制,尤其是时间轴的控制,这点让css animation更加强大,使得flash的部分动画效果可以由css直接控制完成,而这一切,仅仅只需要几行代码,也因此诞生了大量基于css的动画库,用来取代flash的动画部分。在我的项目中一般用 Animate.css 来设置一些动画,期待在工作中能够用animation完美实现UI设计师给的设计图~

写这篇文章的目的是提醒自己不要将这四个属性混淆,顺便详细讲解CSS制作动画的方法,简单一次性的动画中推荐使用transition,比较逻辑清晰,可维护性较好。如果遇到比较复杂的动画,这个时候便可以拿出animation开始你的表演,其实不仅仅用css能实现动画,用js同样可以操控元素的样式实现动画,这个时候你脑海里是不是浮现出setTimeout,setInterval来控制样式实现动画,当然可以,但是相比新出的requestAnimationFrame,它能够更高性能地执行动画,这里抛砖引玉,小伙伴们可以尝试去谷歌以下,后面我也会就这个新出的函数写一篇详细的指南。

文章中有错误欢迎指点~

【关于投稿】

如果大家有原创好文投稿,请直接给公号发送留言。

① 留言格式:

【投稿】+《 文章标题》+ 文章链接

② 示例:

【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180618B19HYB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券