css3 动画详解

sdbxpjzq 2015-12-04

  css3动画:1.transform;2.transition;3.animation; 下面分别详细讲解并解释三者的区别

1. transform (变换) 单纯的变化 瞬间完成 看不到变化过程

   使用方法:直接在样式表中书写即可;

.test:hover
{
    -moz-transform:rotate(5deg); //Firefox
    -webkit-transform:rotate(5deg); //Safari and Chrome 
    -o-transform:rotate(5deg); // Opera
    -ms-transform:rotate(5deg); //IE
    transform:rotate(5deg);
}

none:无转换。

transform-origin:left buttom 以左下角为基准进行旋转 

默认值为 center center 如果只填一个值,则另一个值默认为center

matrix(1,1,1,1,1,1) 使用6哥值得矩阵。


translate(200px,300px) 水平移动200px,垂直移动300px

第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translateX(20px):X轴(水平方向)平移 20px


translateY(20px):Y轴(垂直方向)平移 20px


rotate(20deg): 顺时针旋转20度


rotateX(180deg): 3D 围绕X轴旋转180度


rotateY(180deg): 3D 围绕Y轴旋转180度


scale(2,3):水平放大2倍 垂直放大3倍

指定对象的缩放,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,

则默认取第一个参数的值

scaleX(2) 水平放大2倍


scaleY(2) 垂直放大2倍


skew(30deg,40deg) 水平斜切扭曲30度 垂直斜切扭曲40deg

第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewX(30deg):X轴(水平方向)扭曲30度


skewY(40deg):Y轴(垂直方向)扭曲40度

2. transition (过渡) 结合transform 看到其变化的过程

div
{
    width:100px;
    height:100px;
    background:yellow;

    transition:width 2s, height 2s;
    -webkit-transition:width 2s ease-in 3s, height 2s, -webkit-transform 2s 2s; /* Safari and Chrome */

}

div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
}

与transform结合使用,同时必须是原先已经定义的属性,才可进行变化。


如上例中的:width height transform:rotate(180deg)


transition:width 2s ease-in 3s


width ( transition-property ) : 检索或设置对象中的参与过渡的属性

all : 代表所有属性都进行变化


none : 不指定过渡的css属性

2s ( transition-duration ) : 检索或设置对象过渡的持续时间


ease-in ( transition-timing-function ): 检索或设置对象中过渡的动画类型


3s ( transition-delay ): 检索或设置对象延迟过渡的时间

transition-timing-function

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1,

x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

css3 动画详解

实现先执行什么动画,再执行什么动画的技巧是:使用延迟。即:transition-delay

参考链接:http://www.w3cplus.com/content/css3-transition

3. animation (动画) 结合 transform

div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;

    animation: myfirst 5s ease 5s 1 alternate paused forwards;

    color: white;
}

@keyframes myfirst {
    0% {left: 0px; top: 0px;transform: rotateY(0deg) }
    /*25% {left: 100px;  top: 0px }*/
    50% {left: 300px;  top: 0px;transform: rotateY(0deg)}
    /*75% {left: 400px;  top: 0px }*/
    100% {left: 300px;  top: 0px;transform: rotateY(720deg)}
}

animation: myfirst 5s ease 5s 1 alternate forwards;


myfirst [ animation-name ]:动画名称


5s [ animation-duration ]: 动画的持续时间


ease [ animation-timing-function ]: 动画的过渡类型

同transition的过渡类型

5s [ animation-delay ]: 动画延迟的时间


1 [ animation-iteration-count ]: 动画的循环次数

infinite 无限循环

alternate [ animation-direction ]: 动画在循环中是否反向运动

normal 默认值 正向方向 不反向

alternate 为正常与反向交替运动,


具体:第偶数次正向运动,第奇数次向反方向运动

forwards [ animation-fill-mode ]:元素在动画开始前后的状态是否根据动画设置中“0%”、“100%”的状态设置

取值可以为 none、forwards、backwards 或 both。

默认为 none :动画过程中“0%”、“100%”的状态不会设置为元素开始和结束的状态
backwards 和 forwards 则分别设置开始和结束的状态,both 则同时设置两个的状态。

backwaeds/none 使对象回到 0 0 状态


forwards/both 使对象保持在终态,不回撤

若加入 forwards 属性,则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。

三者区别

1.transform 和 transition 需要经过用户触发才会表现出动态的效果。

2.这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类,也可以是

click、focus 等 JavaScirpt 事件。

3.如果没有设置触发条件而直接给元素设置 transform 或 transition ,用户只能看到元素的终态

而没有动画过程。

4.animation 则无须触发条件,开发者只需为元素绑定动画即可。

5.在旧版本的 animation 中,animation 、transform 以及 transition 都有一个重要的性质——过

程执行完毕后会回撤。

新版的animation添加了animation-fill-mode 属性(none/backwards/forwards/both) 弥补了

这个缺陷。

6.例如以 :hover 触发 transform ,在鼠标离开元素后动画自动反向播放,使到元素回到

transform 之前的状态。

7.animation 也会在动画结束后回滚,但不会反向播放动画,而是直接跳到动画播放之前的动

态。

参考:http://kayosite.com/css3-animation.html

3D效果

参考 http://kayosite.com/more-about-css3-transformation.html

兼容性

参考 http://caniuse.com/

相关推荐