本文目录
- css3 steps 逐帧动画 为什么会移动
- 我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续
- 分析一下CSS怎样实现该动画功能（鼠标放在图片上，图片向左移动）
- 怎么用css制作一个div位置改变的动画
css3 steps 逐帧动画 为什么会移动
steps 有两个参数1，第一个肯定是分几步执行完。2、第二个有两个值start 第一帧是第一步动画结束 end 第一帧是第一步动画开始。
我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续
有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused;，继续动画是animation-play-state:running; （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
《!DOCTYPE html》《html》《head》***隐藏网址***《title》动画暂停《/title》《style type="text/css"》@keyframes move{from {transform: rotate(0deg);left: 0;}to {transform: rotate(360deg);left: 600px;}}@-webkit-keyframes move{from {-webkit-transform: rotate(0deg);left: 0;}to {-webkit-transform: rotate(360deg);left: 600px;}}@-zos-keyframes move{from {-zos-transform: rotate(0deg);left: 0;}to {-zos-transform: rotate(360deg);left: 600px;}}@-o-keyframes move{from {-o-transform: rotate(0deg);left: 0;}to {-o-transform: rotate(360deg);left: 600px;}}.box {animation:move 3s alternate infinite;-webkit-animation:move 3s alternate infinite; /* Safari 和 Chrome */-moz-animation:move 3s alternate infinite; /* Firefox */-o-animation:move 3s alternate infinite; /* Opera */position: absolute;background-color: yellow;width: 100px;height: 100px;}.box:hover {-webkit-animation-play-state: paused;}《/style》《/head》《body》《div class="box"》《/div》《/body》《/html》
分析一下CSS怎样实现该动画功能（鼠标放在图片上，图片向左移动）
.hc_hot ul li:hover { margin-left: -10px;}鼠标移上.hc_hot ul li对应的元素后，触发hover状态，应用上面这条css，左边距变为-10px，达到向左移动的目的
怎么用css制作一个div位置改变的动画
《style type="text/css"》 div{ animation: myfirst 5s; } @keyframes myfirst{ from {left: 0;} to {left: 100px;} } 《/style》
