css动画概念、兼容性及使用

最新推荐文章于 2024-12-10 17:29:00 发布

果果ha

最新推荐文章于 2024-12-10 17:29:00 发布

阅读量1.1k

点赞数 2

分类专栏： css3 文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/cuteyDan/article/details/79721649

版权

css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了CSS3中的动画功能，包括如何使用@keyframes规则创建动画，以及如何在不同浏览器中进行兼容性处理。同时，还提供了多个实例演示了如何设置动画的名称、时长、速度曲线、延迟、迭代次数等属性。

摘要由CSDN通过智能技术生成

什么是css3中的动画：

使元素从一种样式逐渐变化为另一种样式
可以改变任意多的样式任意多的次数
可以用百分比规定变化发生的时间，或者用关键词“from”和“to”,等价于“0%”和“100%”，表示动画的开始和完成

通过css3我们可以创建动画，可以代替页面中的动画图片、Flash动画以及JavaScript。

如果创建css动画，需要了解@keyframes规则:

@keyframes规则用于创建动画，在其中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

兼容性：

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实现：

在 @keyframes 中创建动画时，要将其捆绑到某个选择器，否则不会产生动画效果。

需要至少规定以下两项：

规定动画的名称
规定动画的时长

例1：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        /*兼容处理*/
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }

    /*定义动画----myfirst是动画的名称*/
    @keyframes myfirst
    {
        from {background:red;}
        to {background:yellow;}
    }

    @-moz-keyframes myfirst /* Firefox */
    {
        from {background:red;}
        to {background:yellow;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        from {background:red;}
        to {background:yellow;}
    }

    @-o-keyframes myfirst /* Opera */
    {
        from {background:red;}
        to {background:yellow;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

例2：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s;/*执行动画*/
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }

    @keyframes myfirst
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    @-moz-keyframes myfirst /* Firefox */
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    @-o-keyframes myfirst /* Opera */
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3动画属性：

例3：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation-name:myfirst;
        animation-duration:5s;
        animation-timing-function:linear;
        animation-delay:0s;
        animation-iteration-count:infinite ;
        animation-direction:alternate;
        animation-play-state:running;
        /* Safari and Chrome: */
        -webkit-animation-name:myfirst;
        -webkit-animation-duration:5s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:0s;/*延迟时间*/
        -webkit-animation-iteration-count:infinite ;/*播放次数*/
        -webkit-animation-direction:alternate;/*下次开始时是否是逆向，默认是normal*/
        -webkit-animation-play-state:running;
    }

    @keyframes myfirst
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
</head>
<body>
    本例在 Internet Explorer 中无效。     
    <div></div>
</body>
</html>

上栗简写：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s linear 0s infinite alternate;
        /* Safari and Chrome: */
        -webkit-animation:myfirst 5s linear 0s infinite alternate;
    }

    @keyframes myfirst
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%  {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
</head>
<body>
    本例在 Internet Explorer 中无效。
    <div></div>
</body>
</html>