css3之动画功能介绍

最新推荐文章于 2021-05-19 17:12:57 发布

打不死滴小强

最新推荐文章于 2021-05-19 17:12:57 发布

阅读量351

点赞数 1

分类专栏： html5/css相关文章标签： css3 动画

本文链接：https://blog.csdn.net/u012859748/article/details/52664055

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

1、transition功能

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

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

这里参数property有三个值；none、all、property。duration是变换持续的时间。timing-function是在变换的时间内，变换的速率；有ease、linear、ease-in、ease-out、ease-in-out以及cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。delay是变换的延迟时间，单位为秒或毫秒。

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

例如：

<!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>

2、Animations功能

在CSS3之中，除了可以使用transition实现动画效果之外，还可以使用Animations来实现动画效果。

二者之间的区别：transition只能通过指定属性的开始值和结束值，然后通过两属性值之间进行平滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果，而Animations功能是是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画效果。

其使用方法：

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

关键帧创建好后，还要在元素的样式中使用该关键帧。其方法如下：
元素{
-webkit-animation-name:关键帧合集名称;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite; /*此属性的属性值设定为某个整数值，那么这个动画播放的次数就等于这个整数值（infinite表示无限循环播放）。*/
}
例如：

<!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>

打不死滴小强

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之动画功能介绍

本篇介绍css3中的动画功能。在CSS3中，如果使用动画功能可以使网页上文字或者图像具有动画效果,可以使背景颜色从一种颜色平滑过渡到另外一种颜色,Transition功能支持从一个属性值平滑到另一个属性值,而Animations功能则支持通过关键帧的指定来在页面上产生更复杂的动画效果。1、transition功能在ss3中，transition允许css的属性值在一定的时间区间内平滑地过渡
复制链接

扫一扫

专栏目录