码迷,mamicode.com
首页 > 其他好文 > 详细

7月13号:2D的转换和过渡,动画效果设置

时间:2015-07-15 01:11:52      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

一、2D的转换通过transform来实现,它有4种方式:

  • 位移:translate(x坐标,y坐标),它是以左上角为原点的位移,不影响其他元素
  • 缩放:scale(X倍数,Y倍数),它是以元素中心为原点进行缩放
  • 旋转:rotate(度数),它是以元素中心为原点进行旋转
  • 斜切(扭曲):skew(X度数,Y度数):X和Y方向同时进行扭曲拉缩

二、过渡是通过transition来实现,它可以同时对元素的多个属性同事定义过渡效果(对象,时间,类型,延迟时间)。

  过渡的类型主要有以下几种方式

  • linear:线性过渡
  • ease:平滑过渡
  • ease-in:由慢到快
  • ease-out:由快到慢
  • ease-in-out:由慢到快再到慢 

三、动画效果:通过animation来设置

    

@keyframes myfirst {    
  0% {
  width: 150px;
}

  30% {
  width: 300px;      //动画从0%到100%进程时的效果设置
}

  50% {
  width: 500px;
}

  100% {
  width: 600px;
}
}

.div1 {
  width: 150px;
  height: 150px;
  background-color: #21bbca;
  -moz-animation: myfirst 4s ease infinite;//对元素myfirst进行一个持续时间为4S,过渡效果为平滑过渡,无限循环的动画效果
}

7月13号:2D的转换和过渡,动画效果设置

标签:

原文地址:http://www.cnblogs.com/f19huangtao/p/4646986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!