CSS中的动画功能入门

最新推荐文章于 2022-11-12 10:26:21 发布

Alonso_36

最新推荐文章于 2022-11-12 10:26:21 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/m0_46376522/article/details/106593122

版权

CSS3的动画功能

在CSS3中，使用动画可以使网页上文字或者图像具有动画效果，可以使背景颜色从一种颜色平滑过渡到另外一种颜色。Transition功能支持从一个属性值平滑到另外一个属性值；Animation功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

Transition功能

CSS3中Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

使用方法：
transition:语法;
-moz-transition:语法;//Firefox 4
-webkit-transition:语法;//Safari 和 Chrome
-o-transition:语法;//Opera

语法：
transition:property duration timing-function delay;

执行变换的属性：property。属性规定应用过渡效果的CSS属性的名称。(当指定的CSS属性改变时，过渡效果将开始)
三个类型：
a.none 没有属性会获得过渡效果
b.all 所有属性都将获得过渡效果
c.property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔
变化延续的时间：duration。
规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值0没有效果。
在延续时间段，变换的速率变化：timing-function。
值：
a.ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0).
b.linear:(匀速),linear函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0).
c.ease-in:(加速),ease-in函数等同于贝塞尔曲线(0.42,0,1.0,1.0).
d.ease-out:(减数),ease-out函数等同于贝塞尔曲线(0,0,0.58,1.0).
e.ease-in-out:(加速然后减数),ease-in-out函数等同于贝塞尔曲线(0.42,0,0.58,1.0)
f.cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值。
变化延续时间：delay。
delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值:为数值，单位为s（秒）或者ms（毫秒）。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transition属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            transition:background-color 1s linear 0 ,width 1s linear 0;
            -moz-transition: background-color 1s linear 0 ,width 1s linear 0; /* Firefox 4 */
            -webkit-transition:background-color 1s linear 0 ,width 1s cubic-bezier(0,0.5,0,0) 2s,height 1s linear 0; /* Safari 和 Chrome */
            -o-transition:background-color 1s linear 0 ,width 1s linear 0; /* Opera */
        }
        div:hover{
            background-color: #f60;
            width: 900px;
            height: 400px;
        }

    </style>
</head>
<body>
<h1>transition属性</h1>
<div></div>
</body>
</html>

Animation功能

在CSS中我们除了可以使用Transition实现动画效果，还可以使用Animation来实现动画效果。

使用Transition和Animation的区别
Transition只能通过指定属性的开始值与结束值，然后通过两属性值之间的平滑过渡来实现动画效果，所以Transition不能实现复杂的动画效果；Animation功能是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画效果。
Animation的使用方法

@-webkit-keyframes 关键帧合集名称{创建关键帧的代码}
0%~100%{
本关键帧中的样式
}

关键帧创建好了之后，还要在元素的样式中使用该关键帧。

方法如下：

元素{
-webkit-animation-name:关键帧合集名称;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}

a.-webkit-animation-name 指定合集名称
b. -webkit-animation-duration 整个动画执行完成所需的时间
c. -webkit-animation-timing-function:linear 实现动画的方法
d.-webkit-animation-iteration-count:infinite 如果设定为整数值，那么这个动画的播放次数就等于这个整数值；如果为infinite，则是无限循环
实现动画的方法
a.linear：匀速。
b.ease-in：先慢，后沿着曲线加快。
c.ease-out：先快，后沿着曲线减速。
d.ease：先快，后沿着曲线减速，再沿着曲线加快。
e.ease-in-out：先慢，后沿着曲线加快，再沿着曲线减速。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Animations属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #ff6600;
        }
        @-webkit-keyframes mycolor {
            0%{
                background-color: #ff6600;
                -webkit-transform:rotate(0deg);
                transform:translate(0px,0px);
            }
            10%{
                background-color: green;
                -webkit-transform:rotate(30deg);
                transform:translate(100px,0px);
            }
            20%{
                background-color: red;
                -webkit-transform:rotate(0deg);
            }
            80%{
                background-color: #000;
                -webkit-transform:rotate(30deg);
            }
            100%{
                background-color: #ff6600;
                -webkit-transform:rotate(0deg);
            }
        }
        div:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:2;
        }
    </style>
</head>
<body>
<h1>Animations属性</h1>
<div></div>
</body>
</html>