css3过渡(transition)允许我们在限定的时间内从一个属性值转变到另一个属性值.
●transition-duration:指定转换发生的持续时间
●transition-delay:指定过渡效果的延迟(以秒为单位)
css代码:
过渡效果可以应用于各种css属性,包括:背景颜色,宽度,高度,不透明度等等.
css代码:
div.transition:hover{ width:250px;}
如果你将光标悬停在div元素上,则会从左向右移动.
transition-timing-function属性指定过渡效果的速度曲线.
ease:动画开始缓慢,然后加速(默认值)
ease-out:快速启动,但减速停止.
linear:匀速转换
css代码:
二 css3 transform:rotate()
transform(转换)是一种让元素更改形状,大小和位置的效果
设置15deg的角度旋转(顺时针方向旋转),css代码如下:
正值,顺时针旋转;负值,逆时针旋转.
transition-origin(原点)属性允许你更改要转换元素的位置.该属性的默认值是50% 50%,对应于元素的中间.
y轴(垂直)的原点从上方设定为80%.
div.empty-div{ position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}
效果如下:
transform-origin属性必须与transform属性一起使用.
向下推到其默认位置的右侧.而负值则会将元素向上并拖至其默认位置的左侧.
transform:translate(120px,60px);
以下例子,沿着x轴将<div>元素倾斜45度
transform:skew(45deg);
如果没有指定第二个参数,则它的默认值为零.
scale()方法根据已设定的高度和宽度参数来增加或减少元素的大小.1代表原始大小,2代表原始尺寸的两倍,以此类推.
transform:scale(0.7 0.7);
一次可以使用多个转换.比如同时旋转和缩放元素的大小.对元素应用多个变换,只需要用空格隔开它们.
transform:rotate(35deg) translate(120px);
动画让一个元素从一种风格变为另一种风格.
关键帧将保存元素在特定时间的样式
当你在@keyframes规则中指定css样式时,动画将在某些时间从当前样式逐渐变为新样式.
以下例子,将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时.
100% {background-color:green;} }
作为百分比的替代方法,你可以使用from和to关键字分别代替0%起始点,100%结束点.
在下面的例子中,动画持续一秒钟,并将红色div的背景颜色更改为绿色和蓝色
@keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }
背景颜色将在1s内自动变化.
animation-duration:指定所选动画的持续时间.
如果为指定animation-duration属性,则动画将不起作用.因为默认值是0.
