CSS3中的动画功能(一)

css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果。今天带大家一起来看看css3动画功能中的transitions的用法。
transitions用法:
transition: property duration timing-function
其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡其中包括:
linear[规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))];
ease[规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))];
ease-in[规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))];
ease-out[规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))];
ease-in-out[规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))];
cubic-bezier(n,n,n)[ 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值]。
Transitions示例:
背景颜色变化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>css3动画</title>
    <style>
        div{
            background-color:#ffff00;
            -webkit-transition:background-color 1s linear;
            -moz-transition:background-color 1s linear;
            -o-transition:background-color 1s linear;
        }
        div:hover{
            background-color:#00ffff;
        }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

效果代码:

<style>
        #transition{
            background-color:#ffff00;
            -webkit-transition:background-color 1s linear;
            -moz-transition:background-color 1s linear;
            -o-transition:background-color 1s linear;
        }
        #transition:hover{
            background-color:#00ffff;
        }
    </style>
<div id="transition">示例文字</div>

使用transitions功能时同时平滑过渡多个属性值:

<style>
        #tmore{
            background-color:#ffff00;
            height:50px;
            -webkit-transition:background-color 1s linear,color 1s linear,height 1s linear;
            -moz-transition:background-color 1s linear,color 1s linear,height 1s linear;
            -o-transition:background-color 1s linear,color 1s linear,height 1s linear;
        }
        #tmore:hover{
            background-color:#00ffff;
            height:100px;
        }
    </style>
<div id="tmore">示例文字</div>

在展示一个示例,将下面的文字换成图片效果会更好:

<style>
        #imgtr{
            position:absolute;
            left:0;
            background-color:#ffff00;
            -webkit-transform:rotate(0deg);
            -webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear;
            -moz-transform:rotate(0deg);
            -moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear;
            -o-transform:rotate(0deg);
            -o-transition:left 1s linear,-o-transform 1s linear,height 1s linear;
        }
        #imgtr:hover{
            position:absolute;
            left:30px;
            -webkit-transform:rotate(720deg);
            -moz-transform:rotate(720deg);
            -o-transform:rotate(720deg);
        }
    </style>
<div id="imgtr">示李文忠</div>

 

关于css3中的动画,今天就写这些,还有一个动画下次在说了,亲记得关注哦。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。