CSS3 animation-duration

animation-duration

该属性用于设置动画执行时间

<style type="text/css">
<!-- 绑定动画 -->
#animation:hover {
 animation-name: ani; <!-- 关联的动画名称为 ani -->
 animation-duration: 2s; <!-- animation-duration 同 animation-name 是必须参数,必须有一个时间动画才能执行 -->
}

 <!-- 定义动画 -->
@keyframes ani {
 0% {
  margin-left: 0px;
 }
 50% {
  margin-left: 200px;
 }
 100% {
  margin-left: 0px;
 } 
}
</style>

<div style="width:100px; height:100px; background:orange;" id="animation"></div>

动画效果

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程