CSS3中的动画功能（一）

2022-03-03 10:40:20

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中的动画功能（一）

码农公寓

相关文章