CSS动画优化

1. 没什么技术含量
   1. 答案在Google写的文章里
2. JS优化
   1. 使用requestAnimationFrame代替setTimeout或setInteral
3. CSS优化
   1. 使用will-change或translate

transform

常用功能

(teanslate mdn)
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn); transform: rotate(45deg);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%);
http://js.jirengu.com/xidiy/1/edit?html,css,js,output

使某绝对定位元素居中

某元素{
  left: 50%;
  top: 50%;
  traansform: translate(-50%,-50%);
}

多重效果

组合使用
transform:scale(0.5) translate(-100%,-100%);
transform:none;取消所有

console.log()

console.log() 方法用于在控制台输出信息。
该方法对于开发过程进行测试很有帮助。
提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。

transition过渡

1. 作用：补充中间帧

2. 语法

   1. transition: left 1s linear 5s; 元素在5秒后1秒内完成向左的线性变化

   2. 并不是所有属性都能过渡

   • display: none =>block没法过渡
   • 一般改成visibility: hidden=>visible
   • display和visibility的区别
   • background可以过渡
   • opacity透明度可以过渡

两种方法

使用两次transform

• .a===transform===>.b
• .b===transform===>.c
• 如何知道中间点？用setTimeout或监听transitionend事件

  使用animation

1. 声明关键帧
2. 添加动画

transition的优点在于简单易用，但是它有几个很大的局限。

1. transition需要事件触发，所以没法在网页加载时自动发生。
2. transition是一次性的，不能重复发生，除非一再触发。
3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

@keyframes

1. 用关键帧声明一个动画，2.在animation调用关键帧声明的的动画。
   标准写法

2. 搜索keyframes MDN

3. 一种写法是from to
4. 一种是百分数

/*先用@keyframes声明一个变量*/
@keyframes 动画名字{
    /*声明过渡效果*/
    from{
        /*开始效果*/
    }
    to{
        /*结束效果*/
    }
    /*或者定义中间多个过度效果*/
    0%{
          /*过度效果*/  
    }
    33.3% 66.6%{
         /*过度效果*/  
    }
    100%{
         /*过度效果*/  
    }
}

animation

缩写语法：

animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

• 时长：1s或1000ms
• 过渡方式：跟transition取值一样，如linear
• 次数：3或2.4或infinite
• 方向：reverse|alternate|alternate-reverse
• 填充模式：none|fowards|backwards|both
• 是否暂停：paused|running

  如何让动画停在最后一帧

1. 搜索css animation stop at end
2. 加个forwords

   小项目：跳动的心❤

   http://js.jirengu.com/gezamefone/1/edit?html,css,output
   http://js.jirengu.com/lutecoyica/1/edit?html,css,output