css中的动画效果

最新推荐文章于 2024-09-29 23:45:12 发布

秃了秃噜头

最新推荐文章于 2024-09-29 23:45:12 发布

阅读量393

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_54719957/article/details/115379626

版权

在前端中，随着语言的发展，css变得越来越强大，可以实现许多动态动画效果！
下面是动画效果的基本格式

<style>
 @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        } 
        div{
        animation-name: move;
        animation-duration: 2s;
        }
</style>

或者

<style>
 @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } 
        div{
        animation-name: move;
        animation-duration: 2s;
        }
</style>

<body>
    <div>
    </div>
</body>

本人比较推荐的是用百分比来表示，好处大大的，我们往后看就能知道。

 <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(500px, 0);
            }
            50% {
                transform: translate(500px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        div{
        animation-name: move;
        animation-duration: 2s;
        }
</style>

这是一种正方形动画，如果是from,to则不可以。

动画属性非常多，是好事，说明它的功能很大，对于我们写网站方便实现更多的效果。
在这里插入图片描述
我们现在将这些属性用在程序中
来看一串代码，读者们可以将这些程序复制，进行实验，本人使用软件为vscode.

<style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(500px, 0);
            }
            50% {
                transform: translate(500px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-delay: 0;
            animation-timing-function: linear;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
        
        div:hover {
            animation-play-state: paused;
        }
    </style>

第一种是分开写

    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(500px, 0);
            }
            50% {
                transform: translate(500px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s ease infinite alternate forwards; 
            </style>