欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 动画：animation和transition

程序员文章站 2024-03-24 12:41:46
...

animation

animation使用时必须配合@keyframes

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

        @keyframes mymove
        {
            from {left:0px;}
            to {left:200px;}
        }

        @-webkit-keyframes mymove /*Safari and Chrome*/
        {
            from {left:0px;}
            to {left:200px;}
        }
    </style>
</head>
    <body>

    <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

    <div></div>

</body>
</html>

运行结果可见：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation

transition

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:blue;
        transition:width 2s;
        -moz-transition:width 2s; /* Firefox 4 */
        -webkit-transition:width 2s; /* Safari and Chrome */
        -o-transition:width 2s; /* Opera */
    }

    div:hover
    {
        width:300px;
    }
    </style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

示例：http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

除了使用hover，我们也可以这样写：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:blue;
        transition:width 2s;
        -moz-transition:width 2s; /* Firefox 4 */
        -webkit-transition:width 2s; /* Safari and Chrome */
        -o-transition:width 2s; /* Opera */
    }
    .widthnew{
      width:300px;
    }

    </style>
</head>
<body>

<div onclick="changewidth()"></div>

</body>
<script type="text/javascript">
    function changewidth(){
        console.log("console");
        document.querySelector("div").className = 'widthnew';
    }
</script>
</html>

上一篇： SwiftUI NavigationView页面之间传参数

下一篇： 全排列的时间复杂度为：O(N!)

推荐阅读