鱼C论坛

 找回密码
 立即注册
查看: 4551|回复: 2

[已解决]html动画为什么无法运行?

[复制链接]
发表于 2020-11-24 16:28:12 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
代码在我的电脑上打开无法正常运行,目的是一个小方块从左移动到右边,没有过程直接跳到右边

在网页中检查,演示动画的那几行代码都无法运行,

<!DOCTYPE html>
<html>
<head>
        <title>移动</title>
        <meta charset="utf-8">
        <style type="text/css">
                div{
                        width: 100px;
                        height: 100px;
                        background-color: red;
                        position: relative;
                        animation-name: web;
                        animation-duration: 5s;
                        animation-timing-function: linear;
                        -webkit-animation-name:web;
                        -webkit-animation-duration:5s;
                        -webkit-animation-timing-function:linear;
                }
                @keyframes web{
                        form {left: 0px;}
                        to {left: 200px;}
                }
                @-webkit-keyframes web{
                        from {left: 0px;}
                        to {left: 200px;}
                }
               
        </style>
</head>
<body>
<div></div>
</body>
</html>


检查是这个样子的
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;

    (animation-name: web;
    animation-duration: 5s;
    animation-timing-function: linear;)这三行代码被划掉的
         

    -webkit-animation-name: web;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
}
最佳答案
2020-11-24 16:37:34
form是错的,from才是对的
拼写都拼错(汗)
from {
                top: 0px;
            }

            to {
                top: 200px;
            }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-24 16:37:34 | 显示全部楼层    本楼为最佳答案   
form是错的,from才是对的
拼写都拼错(汗)
from {
                top: 0px;
            }

            to {
                top: 200px;
            }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-25 14:40:18 | 显示全部楼层
form拼写错误,应该是from!
之所以那三行被划是因为Chrome不支持,具体看下图!
Snipaste_2021-02-25_14-38-31.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 11:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表