CSS制作动画，动画刚打开时会抖动加载，把代码注释后在取消就会正常加载

Question

CSS制作动画，动画刚打开时会抖动加载，把代码注释后在取消就会正常加载

发布于
2022-03-23

新手上路，请多包涵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//at.alicdn.com/t/font_3262440_f0g4iah0fd7.js"></script>
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        div {
            height: 100%;
            position: relative;
            text-align: center;
            /* border: 1px solid #000; */
            margin-top: 700px;
        }
        div .icon {
            width: 100px;
            height: 100px;
            transition: all 3s ;
        }
        div .icon:hover {
            width: 0px;
            height: 0px;
            animation: move2 3s forwards;
        }
        @keyframes move1 {
            0% {
                transform: translateY(0px);
            }

            50% {
                /* transform: scale(0.5, 0.5); */
                transform: translateY(-300px);
            }

            100% {
                /* transform: scale(0.2, 0.2); */
                transform: translateY(-700px);
            }
        }
        @keyframes move2 {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(-700px);
            }
        }
    </style>
</head>
<body>
    <div>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huojian"></use>
        </svg>
    </div>
</body>
</html>

css3动画

html5

阅读 1.3k

1 个回答

得票最新

linong

29.2k1266133

发布于
2022-03-24

✓ 已被采纳

div:hover .icon { 即可。你的 icon 都飞了， hover 当然也就无了

撰写回答