CSS3的过渡属性、变形属性、动画属性

鳄鱼君Ba

发表文章数:514

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 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-axisy-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-angley-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包括linearease-inease-outease-in-outcubic-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>

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS3的过渡属性、变形属性、动画属性》 发布于2020-05-29

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

5 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册