CSS3 制作动画效果的属性

CSS Transition

这个能实现很舒服的过度效果,先看CSS代码片段:

.box {
width: 200px;
height: 200px;
background: #ccc;
-webkit-transition: all 1s ease-in-out; /*实现hover状态是backround的过渡*/
}
.box:hover {
background: #333;
}

transiton属性有这几个值:

 

transition-property :* //指定过度的性质,比如transition-property:backgrond 就是只指定backgound参与这个过渡

transition-duration:*//指定这个过渡的持续时间

transition-delay:* //延迟过渡时间

transition-timing-function:*//指定过度类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

 linear   //线性过度
ease-in   //由慢到快
ease-out  //由快到慢
ease-in-out //由慢到快在到慢

同样的,这些我们可以简写,拿上面的代码  -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。

 

CSS Animation

顾名思义,这个就能实现元素的动画效果,那时我就被震惊了,

-webkit-keyframes title {
0% {
text-shadow:0px 0px 15px #000;
}
50% {
text-shadow: 0px 0px 30px #3995bd;
color: #aac7d4;
margin-top:200px;
}
100% {
text-shadow: 0px 0px 15px #000;
}
}
h1 {
-webkit-animation: title infinite ease-in-out 3s;
}
 


animation有这几个属性:

animation-name//属性名,就是我们定义的keyframes
animation-duration //持续时间
animation-timing-function //同上面的transition-timing-function
animation-delay // 设置动画延迟
animation-iteration-count //定义循环次数,infinite为无限
animation-direction //定义动画方式

这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function,它能定义一个动画的转变过程供调用,过程为0%到100%或from(0%)到to(100%),简单点说,只要你有想法,你想让元素在这个过程中以什么样的方式改变都是很简单的。


Transform

transform就是实现元素的变形,如果跟上面的CSS Animation结合起来是不是更酷呢。

transform有几种类型:

scale(num,num) //尺寸,scale(2,3)即x轴方向放大两倍,y轴方向放大3被,同样的可单独写scaleX(2),scaleY(3)

rotate(*deg) //旋转的角度

在2d  transform中 旋转角度俺当前的平面顺时针或逆时针旋转 。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转,同样可以简写称rotate(*,*)。目前已被chrome和safair支持

skew(*deg)//倾斜角度,同样的有skewX和skewY 可简写为skew(*,*)

translate //移动

在2d transform中 分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离,而在3dtransform中新增了一个translateZ 及实现Z轴的移动,实现透视效果。目前在Windows系统上还没有浏览器支持,同样的这些可以简写。


你可能感兴趣的:(CSS3 制作动画效果的属性)