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中的动画,今天就写这些,还有一个动画下次在说了,亲记得关注哦。

你可能感兴趣的:(css3)