Css3动画(animation)

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
作为css3 的属性当然也是存在兼容问题的，我是参考的菜鸟教程上图：

我们了解一下css3 动画中的animation：

animation与过渡不同的是，过渡必须人为的触发才会执行动画，动画不需要人为的触发就能执行。
满足以下3点，就能看到最基本的动画效果了。
动画三要素：
需要执行哪个动画(animation-name)；
需要自己创建一个名称叫做 xxx 动画 (@keyframes xxx)；
动画持续的时长(animation-duration);

编辑一下animation的一些属性至值：

(1)animation-name：指定一个关键帧动画的名字，由@keyframes声明。当值为none时（默认值），将没有任何动画效果，其可以用于覆盖任何动画。
(2)animation-duration：动画持续时间，单位为s或ms，一般使用秒
(3)animation-timing-function：动画的播放方式函数：linear、ease-in等
(4)animation-delay：动画开始之前的延迟时间
(5)animation-iteration-count：指定动画的循环次数取值一般为整数，默认值为1，即只播放一次，如果取值为infinite，动画将会无限次地播放。
(6)animation-direction：动画的播放方向。默认值为normal，即动画每次循环都向前播放，取值为alternate时，动画播放为偶数次则向前播放，为奇数次则反方向播放，例如一个反复的弹跳动画。。。
(7)animation-play-state：用来控制动画的播放状态。主要值有两个：running和paused。running为默认值，可以通过paused将正在播放的动画停止，可以通过running将暂停的动画播放。
(8)animation-fill-mode：用来设置动画的时间外属性
其用四个值：none、forwards、backwards和both。
默认值为none，表示动画正常开始，结束后样式回到初始样式（animation属性之外的样式）
取值为forwars时，动画结束后，样式保持为最后一帧的样式（100%时）。

取值为backwards时，当有delay属性时，可以迅速将第一帧的样式应用到动画元素，而不是开始动画时才将第一帧的样式应用到动画元素，当然，delay为0时看不出效果。

取值为both时，让动画元素同时有forwards和backws两种属性效果。

注：重点重点 (这八个属性可以分开写，也可以合并写并用空格隔开)。

@keyframes使用方式：
animation-name的值就是在这里使用，举一个实例：

.div{margin: auto;width: 100px;height: 100px;position:relative;animation: eason 5s linear 1s infinite alternate;}@keyframes eason{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

效果是动画图片展示不出来，看位置可以是一个正方形在移动画一个正方形，颜色随之改变！

Css3动画(animation)相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
幻灯片（基于CSS3动画animation）
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
css3动画animation，transition
animation demo1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...
CSS3动画animation
一.语法 animation: animation-name(创建的动画名) animation-duration(动画时间) animation-timing-function(动画方式) anim ...
CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼案例
本案例下载地址>>>点击打开链接效果: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

Css3动画(animation)

Css3动画(animation)相关推荐

最新文章

热门文章