为什么没有效果

来源：2-29 编程练习

weibo_脂粉乱了丨_0

2018-01-07 17:10:32

<!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>

写回答

3回答

好帮手慕糖

2018-01-09

已采纳

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

祝学习愉快~

weibo_脂粉乱了丨_0

提问者

2018-01-08

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

重新修改了还是没有效果