HTML5 CSS3(三)

3D转换

【立方体】

【纸张效果】

【切割轮播图案例】

【美女相册案例】

动画

动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

动画与过渡的区别：

1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

使用一个动画的基本步骤：

//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点（from to 只能设置两个状态的变化，满足不了复杂动画的要求，复杂使用百分比）from to 等于 0% 100%
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素

animation详解

animation是一个复合属性，一共有8个参数

animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数（infinite无限次）
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态，动画的最终状态（forwards 停留在最终状态）
animattion-play-state:设置动画的状态。动态状态配合：hover使用

动画库的使用

  /* 使用动画 */
  /*animation: flash 2s infinite;*/