`
好好学习-天天向上
  • 浏览: 34248 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论
阅读更多

  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]区域内,否则无效。

show

实现先执行什么动画,再执行什么动画的技巧是:使用延迟。即: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/

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics