CSS3 中制作动画的几个属性: css3 中的变形(transform), 过渡(transition), 动画(animation).
一, CSS3 变形(transform)
语法:
transform : none | <transform-function> [ <transform-function> ]*
也就是:
transform: rotate | scale | skew | translate |matrix;
1.1, 旋转 rotate()
rotate(<angle>) : 通过指定的角度参数对元素指定一个 2D rotation(2D 旋转), 需先有 transform-origin 属性的定义(默认旋转中点是中心点).
transform-origin 定义的是旋转的基点, 其中 angle 是指选择角度, 正顺时针旋转, 负逆时针旋转.
1.2, 移动 translate(X,Y)
transform(100px,20px);
transform:translateX(100px):
transform:translateY(20px)
1.3, 缩放 scale(X,Y)
scale(<number>[, <number>]): 提供执行 [sx,sy] 缩放矢量的两个参数指定一个 2D scale(2D 缩放). 如果第二个参数未提供, 则取与第一个参数一样的值. 而 Y 是一个可选参数, 如果没有设置 Y 值, 则表示 X,Y 两个方向的缩放倍数是一样的, 并以 X 为准. 如: transform:scale(2,1.5);
1.4, 斜切 skew()
skew(<angle> [, <angle>]) :X 轴 Y 轴上的 skew transformation(斜切变换). 第一个参数对应 X 轴, 第二个参数对应 Y 轴. 如果第二个参数未提供, 则值为 0, 也就是 Y 轴方向上无斜切. skew 是用来对元素进行扭曲变行, 第一个参数是水平方向扭曲角度, 第二个参数是垂直方向扭曲角度. 其中第二个参数是可选参数, 如果没有设置第二个参数, 那么 Y 轴为 0deg. 同样是以元素中心为基点, 我们也可以通过 transform-origin 来改变元素的基点位置.
transform:skew(30deg,10deg);
方法: X 轴: 正数为左, 负数为右; Y 轴: 正数为下, 负数为上
二, CSS3 过渡(transition)
属性详解
transition-property
不是所有属性都能过渡, 只有属性具有一个中间点值才具备过渡效果.
transition-duration
指定从一个属性到另一个属性过渡所要花费的时间. 默认值为 0, 为 0 时, 表示变化是瞬时的, 看不到过渡效果.
transiton-timing-function
过渡函数, 有如下几种:
liner : 匀速
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速再减速
cubic-bezier: 三次贝塞尔曲线, 可以定制
触发过渡
单纯的代码不会触发任何过渡操作, 需要通过用户的行为 (如点击, 悬浮等) 触发, 可触发的方式有:
:hoever :focus :checked 媒体查询触发 JavaScript 触发
局限性
transition 的优点在于简单易用, 但是它有几个很大的局限.
(1)transition 需要事件触发, 所以没法在网页加载时自动发生.
(2)transition 是一次性的, 不能重复发生, 除非一再触发.
(3)transition 只能定义开始状态和结束状态, 不能定义中间状态, 也就是说只有两个状态.
(4)一条 transition 规则, 只能定义一个属性的变化, 不能涉及多个属性.
CSS Animation 就是为了解决这些问题而提出的.
三, CSS3 animation(动画)
CSS3 的 animation 属性可以像 Flash 制作动画一样, 通过控制关键帧来控制动画的每一步, 实现更为复杂的动画效果. ainimation 实现动画效果主要由两部分组成:
1)通过类似 Flash 动画中的帧来声明一个动画;
2)在 animation 属性中调用关键帧声明的动画.**
注: animation 属性到目前位置得到了大多数浏览器的支持, 但是, 需要添加浏览器前缀哦!
animation 动画属性
还是先列表格来说明属性, 自己感觉会比较清晰:
(1)animation-name:none 为默认值, 将没有任何动画效果, 其可以用来覆盖任何动画
(2)animation-duration: 默认值为 0, 意味着动画周期为 0, 也就是没有任何动画效果
(3)animation-timing-function: 与 transition-timing-function 一样
(4)animation-delay: 在开始执行动画时需要等待的时间
(5)animation-iteration-count: 定义动画的播放次数, 默认为 1, 如果为 infinite, 则无限次循环播放
(6)animation-direction: 默认为 nomal, 每次循环都是向前播放,(0-100), 另一个值为 alternate, 动画播放为偶数次则向前播放, 如果为基数词就反方向播放
(7)animation-state: 默认为 running, 播放, paused, 暂停
(8)animation-fill-mode: 定义动画开始之前和结束之后发生的操作, 默认值为 none, 动画结束时回到动画没开始时的状态; forwards, 动画结束后继续应用最后关键帧的位置, 即保存在结束状态; backwards, 让动画回到第一帧的状态; both: 轮流应用 forwards 和 backwards 规则.
@keyframes
CSS3 的 animation 制作动画效果主要包括两部分: 1. 用关键帧声明一个动画, 2. 在 animation 调用关键帧声明的的动画.
@keyframes 就是关键帧. 这个帧与 Flash 里的帧类似, 一个动画中可以有很多个帧.
一个 @keyframes 中的样式规则是由多个百分比构成的, 可以在这个规则上创建多个百分比, 从而达到一种不断变化的效果. 另外,@keyframes 必须要加 webkit 前缀. 举个例子:
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
- div:hover {
- -webkit-animation: 1s changeColor;
- animation: 1s changeColor;
- }
- @-webkit-keyframes changeColor {
- 0% { background: #c00; }
- 50% { background: orange; }
- 100% { background: yellowgreen; }
- }
- @keyframes changeColor {
- 0% { background: #c00; }
- 50% { background: orange; }
- 100% { background: yellowgreen; }
- }
上面代码中的 0% 100% 的百分号都不能省略, 0% 可以由 from 代替, 100% 可以由 to 代替. 要让 changeColor 动画有效果, 就必须要通过 CSS3animation 属性来调用它.
区别
animation 属性类似于 transition, 他们都是随着时间改变元素的属性值, 其主要区别在于: transition 需要触发一个事件才会随着时间改变其 CSS 属性; animation 在不需要触发任何事件的情况下, 也可以显式的随时间变化来改变元素 CSS 属性, 达到一种动画的效果
来源: http://www.jianshu.com/p/45d6e4b38401