LouieLiu

CSS3与3D轮转(二)

发表于 | | 阅读次数

这里重点讨论一下CSS3中可以实现的动画效果的animation属性

animation

Web 动画 API的动画接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴 animation属性在css3中可以用来动画化许多其他的css属性 比如color，background-color,height,width等 每个动画都需要使用@keyframes来定义规则 然后使用animation属性调用比如这样：

1
2
3
4
5
6
7
8
9
10
11
.ele{
    animation:changeColor 6s infinite;
}
@keyframes changeColor{
    0%{
       background: #0e0;
    }
    100%{
       background: #ff4;
    }
}


“keyframes” 也可以叫‘关键帧’ keyframes做什么呢 用来控制CSS动画的中间环节 来实现中间时间过渡段具体每一帧的动作 实现更多动画细节 keyframes有自己的语法规则 它的命名是以@keyframes 开始 后面紧跟着 自定义的动画名称 然后类似于css的写法加上花括号 内部就是对不同时段规定的不同样式 “@keyframes”的样式规则使用多个分段的百分比构成 每个分段需要有动画效果的元素加上不同的属性从而使元素达到一种不断在变化的效果 然后可以通过缩略动画属性或其子属性来控制这些关键帧，以便更好地控制应如何处理这些关键帧。 为了让一个关键帧列表有效，它必须至少包含了对0%（或from）和100%（或to）即动画的开头帧和结束帧的定义。 如果都没有进行定义，那么整个@keyframes 是无效的，不能使用

子属性

  • animation-name: 用来声明@keyframes的操作名称
  • animation-duration: 完成一个元素播放周期所需时间 单位为 ‘s’(秒)
  • animation-timing-function: 建立动画预设的加速度曲线 就是动画的播放方式 例如：easy[逐渐减慢] linear[匀速] ease-in[加速] ease-out[减速] ease-in-out[加速后减速] ease-in-out[减速后加速] cubic-bezier 允许自定义一个时间函数cubic-bezier(x1, y1, x2, y2)具体与transition-timing-function 一样 steps()步骤动画 规定几步完成 每步完成的时间(t)为总时间(T)/步骤(n) 分为start 和end 两种 start表示每步完成的时间的开始就已经运动了 end表示每步完成时间结束才运动 实例可参见Twitter点赞效果css3实现
  • animation-delay: 加载元素和动画序列开始之间的时间
  • animation-direction:设置循环后的动画的方向 默认值是在每个周期复位 动画每次循环都向前播放 即normal 另一个值为alternate 动画播放在第偶数次向前奇数次反向
  • animation-iteration-count:动画应该执行的次数 infinite为无限次
  • animation-fill-mood:设置动画之前/之后应用哪些值 比如你可以将动画的最后状态设置保留在屏幕上 或者将其设置为在动画开始是来回切换之前 如backwards 则默认应用第一帧样式 忽略delay；或为forwards 则在动画结束后 元素将应用动画结束后的属性值 如为both 则hi设置开始和结束的状态
  • animation-play-state:暂停/播放 动画 paused/running
  • animation属性可以自动触发 也可以通过状态增加class属性触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ele {
  animation:stretch 1.5s ease-out 0s alternate infinite none running;
}
@keyframes stretch{
    0%{
       transform: scale(.3);
       background-color: red;
       border-radius: 100%;
    }
    50%{
		background-color: #f0f;
    }
    100%{
    	transform: scale(2);
       background: #ff4;
    }

解释如图

上述代码效果如下：

回到之前的话题 现在只需要利用animation属性设置一定的值就大功告成了 添加代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 #container{
    ...
    -webkit-animation: cubeRotate 20s ease-in-out infinite 1s;
	  animation: cubeRotate 20s ease-in-out infinite 1s;
}
@-webkit-keyframes cubeRotate {
	  0% {
	    -webkit-transform: rotateY(0deg);
	    transform: rotateY(0deg);
	  }
	  11.1% {
	    -webkit-transform: rotateY(40deg);
	    transform: rotateY(40deg);
	  }
	  22.2% {
	    -webkit-transform: rotateY(80deg);
	    transform: rotateY(80deg);
	  
      ...
	  100% {
	    -webkit-transform: rotateY(360deg);
	    transform: rotateY(360deg);
	  }

这样就大功告成 完整代码Github demo

参考链接：
animation
CSS3 Animation
CSS Animations
Animation
搞定这些疑难杂症，向css3动画说yes