css3动画

最新推荐文章于 2024-04-16 00:12:34 发布

L_x_Ll

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量410

点赞数

分类专栏： Web前端 css3 文章标签： css3 web 动画

本文链接：https://blog.csdn.net/L_x_Ll/article/details/50761478

版权

Web前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

CSS动画分为Transition功能和Animations功能

Transition功能支持从一个属性值平滑过渡到另一个属性值：在样式代码中，如果使用Firefox浏览器，需要写成“-moz-transition”的形式；如果使用Opera浏览器，需要写成“-o-transition”形式；如果使用的是Safari或者是Chrome浏览器，需要写成“-webkit-transtion”形式。

transtion属性使用方法：transition：property duration timing-function

property表示要进行平滑过渡的属性，duration完成过渡的时间，timing-function表示通过什么方法完成过渡

同时过渡多个属性：property1 duration1 timing-function1，property2 duration2 timing-function2

不同属性之间用“，”隔开

Animations功能与Transitions功能相同，只是可以实现更复杂的动画。

Animations使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            background-color: red;
        }
        @-webkit-keyframes myPlay {
            0%{
                background-color:red ;
            }
            50%{
                background-color:green;
            }
            100%{
                background-color:red;
            }
        }
        div:hover{
            -webkit-animation-name:myPlay ;
            -webkit-animation-duration:3s;
            -webkit-animation-timing-function: linear ;
        }
    </style>
</head>
<body>
    <div>演示</div>
</body>
</html>

也可以实现多个属性值同时改变，例子如下：

div{
    background-color: red;
    width:200px;
    height: 200px;
}
@-webkit-keyframes myPlay {
    0%{
        background-color:red ;
        width: 200px;
    }
    50%{
        background-color:green;
        width:300px;
    }
    100%{
        background-color:red;
        width: 200px;
    }
}
div:hover{
    -webkit-animation-name:myPlay ;
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function: linear ;
}

L_x_Ll

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3动画

CSS动画分为Transition功能和Animations功能Transition功能支持从一个属性值平滑过渡到另一个属性值：在样式代码中，如果使用Firefox浏览器，需要写成“-moz-transition”的形式；如果使用Opera浏览器，需要写成“-o-transition”形式；如果使用的是Safari或者是Chrome浏览器，需要写成“-webkit-transtion”形式。
复制链接

扫一扫

专栏目录