为什么没有效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            /*此处写代码*/
           animation:BOX 2s .5s ease-in-out normal infinite; 
        }
        @keyframes translate{
           0%{bottom:40px;}
           25%{bottom:40px;}
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>

weibo_脂粉乱了丨_0 2018-01-07

源自：CSS3动画 2-29 编程练习

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2018-01-09 09:22:38

你好，声明的动画名，与使用时的要一致，整体可参考下图：

祝学习愉快~

收起回答

提问者 weibo_脂粉乱了丨_0 2018-01-08 19:30:16

            /*此处写代码*/
            transition-delay:.5s;
            transition-timing-function:ease;
            animation-iteration-count:infinite;
        }
        @keyframes div{
           0%{top:40px;}
           100%{bottom:40px;}
        }

重新修改了还是没有效果

收起回答