首页 > Web开发 > 详细

动画---CSS3 animation

时间:2019-11-15 13:54:05      阅读:66      评论:0      收藏:0      [点我收藏+]

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

语法格式:

animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;

技术分享图片

关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}
animation-iteration-count:infinite;  无限循环播放    默认是1次
animation-direction: alternate   动画应该轮流反向播放    默认是 normal
animation-play-state:paused;   暂停动画"

 

 

小汽车案例

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}

 

 

 

动画---CSS3 animation

原文:https://www.cnblogs.com/jane-panyiyun/p/11865775.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!