CSS3的过渡属性、变形属性、动画属性
元素从一种样式转变为另一种样式添加效果,列如渐显、渐弱、动画快慢。
CSS3元素过渡
● transition-property属性,用于指定应用过渡效果的CSS属性的名称。
transition-property:none | all | property;
属性值 | 描述 |
---|---|
none | 没有属性会获得过渡效果 |
all | 所有属性都将获得过渡效果 |
property | 定义应用过渡效果的CSS属性名称,多个名称之间以逗号分割。 |
这里我们通过div标签来了解一下基本使用(当鼠标悬停到div标签时,背景颜色由蓝色变为红色):
<style type="text/css">
div.eyujun{
width: 500px;
height: 130px;
background-color: blue;
font-weight: bold;
color: #fff;
}
div.eyujun:hover{
background-color: red;
/*指定通过过渡的CSS属性*/
-webkit-transition-property:background-color; /*Safari Chrome浏览器兼容*/
-moz-transition-property:background-color;/*Firefox*/
-o-transition-property:background-color;/* Opera*/
}
</style>
<div class="eyujun">属性改变元素背景</div>
● transition-duration属性,用于指定义过渡效果花费的事件,默认为0,常用单位是秒(s)或者毫秒(ms)。
transition-duration:time;
结合上一个案例进行修改(当鼠标悬停到div标签时,背景颜色由蓝色变为红色并设置过渡时间)
<style type="text/css">
div.eyujun{
width: 500px;
height: 130px;
background-color: blue;
font-weight: bold;
color: #fff;
}
div.eyujun:hover{
background-color: red;
/*指定通过过渡的CSS属性*/
-webkit-transition-property:background-color; /*Safari Chrome浏览器兼容*/
-moz-transition-property:background-color;/*Firefox*/
-o-transition-property:background-color;/* Opera*/
/*设定过渡时间*/
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
}
</style>
<div class="eyujun">属性改变元素背景并设置过渡时间</div>
CSS3元素变形
CSS3出现后,通过transform属性就可实现变形效果。2012年9月,W3C组织发布了CSS3变形工作草案,这个草案包括了CSS3 2D变形和CSS3 3D变形,其中CSS3 3D变形包括平移、旋转、缩放、倾斜。
在CSS3之前,如果想实心上面的效果,都需要依赖图片、Falsh或者JavaScript才可以完成。可以说CSS3提高了网页开发者的工作效率和页面的执行速度。
● transform(变形)属性,可以让元素在一个坐标系统中变形。
transform:none | transform-functions;
transform属性的默认值为none,适用于内联元素和块元素,表示不进行变形。transform-function用于设定变形还能输,可以是一个或者多个变形函数列表。
transform-function函数:
函数 | 描述 |
---|---|
matrix() | 定义矩形变换,基于X和Y坐标重新定位元素的位置。 |
translate() | 移动元素对象,即基于X和Y坐标重新定位元素 |
scale() | 缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数、负数和小数。 |
rotate() | 旋转元素对象,取值为一个度数值。 |
skew() | 倾斜元素对象,取值为一个度数值。 |
在CSS3中使用transform属性,可以实现的变形效果有平移、缩放、倾斜和旋转,接下来分别进行说明。
● 平移,使用translate()方法能够重新定义元素的坐标,实现平移效果。
transform: translate(x-vlue,y-value);
x-value指元素在水平方向上移动的距离,y-value指元素在垂直方向上移动的距离,如果省略了第二个参数,即取默认值0。当值为负数时,表示反方向移动元素。
translate()方法平移的时候,以元素的中心位置为基点,具体通过案例来体验效果:
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
}
#div1{
transform:translate(100px,30px); /*x轴向右移动100px,向下移动30px*/
/*指定平移属性*/
-ms-transform:translate(100px,30px); /*IE9浏览器兼容*/
-webkit-transform:translate(100px,30px); /*Safari Chrome浏览器兼容*/
-moz-transform:translate(100px,30px);/*Firefox*/
-o-transform:translate(100px,30px);/* Opera*/
}
</style>
<div>我是元素原来的位置</div>
<div id="div1">我是平移过后的位置</div>
● 缩放,使用scael()方法用于缩放元素大小,该函数包含两个参数值,分别用来定义宽度和高度的缩放比例。
transform:scale(x-axis,y-axis);
x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素;负数值不会缩小元素,而是反转元素(例如文字被反转),然后再缩放元素。如果第二个参数省略,则第二个参数等于第一个参数值。
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
}
#div2{
margin: 100px;
transform:scale(2,3); /*高度放大2倍,宽度放大3倍*/
/*指定平移属性*/
-ms-transform:scale(2,3); /*IE9浏览器兼容*/
-webkit-transform:scale(2,3); /*Safari Chrome浏览器兼容*/
-moz-transform:scale(2,3);/*Firefox*/
-o-transform:scale(2,3);/* Opera*/
}
</style>
<div>我是原来的元素</div>
<div id="div2">我是放大后的元素</div>
● 倾斜,使用skew()方法能够让元素倾斜显示,该函数包含两个参数值,分别用来定义X轴和Y轴坐标倾斜角度。
transform: skew(x-angle,y-angle);
参数x-angle和y-angle表示角度值,第一个参数表示相对于X轴进行倾斜,第二个参数表示相对于Y轴进行倾斜,如果省略第二个参数,则取默认值0。
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
}
#div3{
transform:skew(30deg,10deg); /*x轴倾斜30度,y轴倾斜10度*/
/*指定平移属性*/
-ms-transform:skew(30deg,10deg); /*IE9浏览器兼容*/
-webkit-transform:skew(30deg,10deg); /*Safari Chrome浏览器兼容*/
-moz-transform:skew(30deg,10deg);/*Firefox*/
-o-transform:skew(30deg,10deg);/* Opera*/
}
</style>
<div>我是原来的元素</div>
<div id="div3">我是放大后的元素</div>
CSS3动画效果
在CSS3中使用animation属性可以定义复杂的动画效果。使用动画之前必须定义关键帧,一个关键帧表示动画中的一个状态。
● animation-name属性,用于定义要应用的动画名称。
animation-name: keyframename | none;
animation-name属性初始值为none,适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称,如果值为none,则表示不应用任何动画,通常用于覆盖或者取消动画。
● animation-duration属性,用于定义整个动画效果完成所需要的时间,以秒或毫秒计。
animation-duration:time;
animation-duration属性初始值为0,适用于所有块元素和行内元素。time参数是以秒(s)或者毫秒(ms)为单位的时间,默认值为0,表示没有任何动画效果。当值为负数时,则被视为0。
● @keyframes规则,用于创建动画。
@keyframes animationname {
keyframes-selector{ css-styles; }
}
animationname:表示当前动画的名称,它将作为引用时的唯一标识,因此不能为空。
keyframe-select:关键帧选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个百分比、from或者to。其中,from和0%效果相同,表示动画的开始,to和100%效果相同表示动画的结束。
css-styles:定义执行到当前关键帧时对应的动画状态,由CSS样式属性进行定义,多个属性之间用分号分割,不能为空。
animation-name属性和animation-duration属性结合使用:
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
position: relative;
animation-name:myai; /*定义动画名称*/
animation-duration: 2s; /*定义动画时间*/
/*SaFari Chrome浏览器兼容*/
-webkit-animation-name:myai;
-webkit-animation-duration:2s;
}
@keyframes myai{
from {left: 0px;}
to {left: 100px;}
}
@-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
from {left: 0px;}
to {left: 100px;}
}
</style>
<div>动画元素</div>
● animation-timing-function属性,用于规定动画的速度曲线,可以定义使用哪种方式来执行动画效果。
animation-timing-function: value;
animating-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。
属性值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结尾 |
ease-in-out | 动画以低速开始和结尾 |
cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己定义的值,n为从0到1的数值 |
animation-timing-function属性的具体使用方法:
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
position: relative;
animation-name:myai; /*定义动画名称*/
animation-duration: 2s; /*定义动画时间*/
animation-timing-function: linear;
/*SaFari Chrome浏览器兼容*/
-webkit-animation-name:myai;
-webkit-animation-duration:2s;
-webkit-animation-timing-function: linear;
}
@keyframes myai{
from {left: 0px;}
to {left: 100px;}
}
@-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
from {left: 0px;}
to {left: 100px;}
}
</style>
<div>动画元素</div>
● animation-delay属性,用于定义执行动画效果之前延时的时间,即规定动画什么时候开始。
animation-delay:time;
参数time用于定义动画开始前等待的时间,其单位是秒或者毫秒,默认属性值为0.animation-delay属性适用于所有的块元素和行内元素。
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: blue;
border: dashed 1px red;
color: #fff;
position: relative;
animation-name:myai; /*定义动画名称*/
animation-duration: 2s; /*定义动画时间*/
animation-timing-function: linear;/*定义动画速度曲线*/
animation-delay: 2s; /*定义动画延时时间*/
animation-iteration-count: 3; /*定义动画的播放次数*/
animation-direction: alternate;/*定义动画播放 的方向*/
/*SaFari Chrome浏览器兼容*/
-webkit-animation-name:myai;
-webkit-animation-duration:2s;
-webkit-animation-timing-function: linear;
-webkit- animation-delay: 2s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
}
@keyframes myai{
from {left: 0px;}
to {left: 100px;}
}
@-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
from {left: 0px;}
to {left: 100px;}
}
</style>
<div>动画元素</div>
模板君 » CSS3的过渡属性、变形属性、动画属性