javascript - 求教css3 animation问题-PHP中文网问答

javascript - 求教css3 animation问题

高洛峰 2017-04-11 11:03:54

[JavaScript讨论组]

312

DOM结构

CSS样式及动画

.wrap{
    position: relative;
    width: 100px;
    height: 400px;
    background: blue;

}
.content{
    position: absolute;
    width: 90px;
    height: 200px;
    background: red;
    top: 0px;
          -moz-animation:toTop 2s;
                      -webkit-animation:toTop 2s;
                      -o-animation:toTop 2s;
}
    @keyframes toTop{
         0%{top:0px;},
         100%{top: 87px}
      }

为什么动画不运行？什么原因造成的啊

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(3)

黄舟2017-04-11 11:05:54 3楼

@keyframes toTop{
     0%{top:0px;}
     100%{top: 87px}
}

关键帧之间不用逗号

赞 +0

添加回复

大家讲道理2017-04-11 11:05:54 2楼

-moz-animation:toTop 2s; -webkit-animation:toTop 2s; -o-animation:toTop 2s;

这个属性应该缺参数了，动画类型，动画结束之后停留在结束时候的状态还是回到初始状态等应该都要写。

赞 +0

添加回复

PHP中文网2017-04-11 11:05:54 1楼

一楼说的对，亲测可行

赞 +0

添加回复