CSS3动画animation讲解

原创 2016年08月28日 23:36:24
CSS动画基础
种类:  变形(transformation)、变换(transition)和动画(animation)

核心:动画名、关键帧

关键帧:   描述在整个动画过程中,会发生变化的属性列表(也就是,哪些属性会改变,如何改变以及什么时候改变)。

主要步骤:定义动画 、将其赋给指定的HTML元素(或元素)。

定义动画:
1、使用@keyframes 规则来声明关键帧。
2、给出动画命名 :  run。

一、定义关键帧:
Transform:旋转rotate、扭曲skew、缩放scale和移动translate
1、关键字from 和 to; ( 一个对象从一个地方移动到另一个地方)
@keyframes run{
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(800px);
    }
}
2、或百分比

from - to 与 0% - 100% 同等意义

@keyframes run{
    0% {
        transform: translateX(0);
    }


    100% {
        transform: translateX(800px);
    }
}


二:将动画赋给HTML元素
animation 的参数或者是动画的一些属性:
   1、animation-name: run;   关键帧的名
   2、animation-duration: 2s;     s/ms    时长

.person{
   animation-name: run;   关键帧的名
   animation-duration: 2s;    时长
}


三、更多的动画属性
1、animation-timing-function  (动画的速度曲线)
linear :  动画从头到尾的速度是相同的。
ease :   默认。动画以低速开始,然后加快,在结束前变慢。
ease-in : 动画以低速开始。
ease-out  : 动画以低速结束。
ease-in-out : 动画以低速开始和结束。

2、animation-iteration-count (动画会重复播放多少 ,int)
3、animation-delay   (动画的延迟执行时间s/ms)
4、animation-fill-mode   (定义动画的停留的位置 )
none :不改变默认行为。
forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。


5、animation-play-state  (属性规定动画正在运行还是暂停)
paused 规定动画已暂停。
running 规定动画正在播放。


6、animation-direction  (动画进行的方向)
normal(正常)  0% - 100%
reverse(反转) 100% - 0%
alternate(交替)  0% - 100%  100% - 0%
alternate-reverse(交替反转)  100% - 0%  0% - 100%
7、transform-origin: 50% 20% 0;  (x,y,z)(确定旋转中心)   
left    以自身的左边为x起点
center     以自身的左边为center(50%)起点
right 、length 、%


四:动画简写
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
例子:animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;


五:兼容性(兼容性差,采用hack)
多数属性支持:IE10及以上,ff,
 -webkit-,-o-, -ms- 或 -moz- 
-webkit-transform : rotate(0deg);   Safari 和 Chrome  
-moz-transform : rotate(0deg);      ff
-ms-transform : rotate(0deg);     IE
-o-transform : rotate(0deg);     -opera
transform : rotate(0deg);    统一标识语句
opera浏览器还有个比较怪异的地方,它偏爱@keyframes myrotate{...},而对@-o-keyframes myrotate{...}不感冒
Trident(IE内核)、Gecko(Firefox内核)、Webkit(Safari内核,Chrome内核原型,开源)、Presto+Blink(Opera前内核+现内核)

六:优点与缺点
1、CSS动画的transform矩阵是C++级的计算,性能更优
2、代码简洁
3、浏览器会对CSS3的动画做一些优化(比如专门新建一个图层来跑动画)
4、在动画控制上不够灵活
5、兼容性不好 
6、做动画时候建议将js与css结合


七:学习网站
http://www.w3cplus.com/css3/CSS3-animation.html




相关文章推荐

CSS3动画animation语音滚动

现的图像动画效果大致是这样的:语音滚动! 【代码效果】 CSS3动画animation语音滚动 html,body { padding: 0; margin: 0; } .r...

CSS3之transition和animation动画

在写完css3之变形后,感觉一下子对transform的使用清晰了很多,所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能 本文示例中使用到的h...

css3 动画之transition,animation

css3动画   csss3实现动画的方式主要有两种方式:一种是用transition过渡效果来实现动画,另外一种直接使用animation配合keyframe来实现。虽然这两种方式都能实现动画效...

CSS3特效之动画animation

animation 渐变背景动画 悬停背景渐变 @-webkit-keyframes changeBg{ 0%{background-color:#000;} 20%{backgroun...

CSS3 动画属性 animation 的基本用法

CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。 ...

浅谈CSS3新特性——动画animation

animation-timing-function:linear指定动画从头到尾的速度相同 animation-fill-mode:forwards在动画结束后(由 animation-iterati...

css3的animation 动画

div{ color:#ffffff; font-weight:bold; font:bold 14px '微软雅黑', Verdana, Arial, Helvetica, sans-ser...
  • ling811
  • ling811
  • 2013年12月04日 13:19
  • 569

CSS3动画——@keyframes规则和animation属性

简介:@keyframes定义关键帧,即动画每一帧执行的是什么,animation是来定义动画的每一帧如何执行的。一.@keyframe 语法:@keyframes animationname {ke...

css3 动画(animation)、渐变(transition)和改变(transform)整理

这两天在优化页面,准备做一些

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3动画animation讲解
举报原因:
原因补充:

(最多只允许输入30个字)