css动画和过渡

过渡

过渡是css3中的特征之一

语法规范

 transition：要过渡的属性 花费时间 运动曲线(可省略) 何时开始（可省略）;

1.属性：想要变化的css属性，宽度高度背景颜色 内外边距都可以。如果想要所有的属性欧彼岸花过渡，写一个 all就可以。

2.花费时间：单位是秒，必须写单位：0.5s

3.运动曲线： 默认是ease 可以省略

4.何时开始：单位是秒（必须写单位）可以设置延迟出发时间 默认是0s 可以省略

 <style>
    div {
       width: 200px;
    height: 100px;
       background-color: pink;
       /* transition: width .5s ease 0s; //单个属性 */
       transition: all .5s ease 0s; // all全部属性变化
    }
    div:hover { //鼠标经过
       width: 400px;
       height: 200px
    }
 ​
 </style>

动画

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

动画的基本使用

1. 先定义动画

 @keyframes name {
  0%{
  width: 100px;
  }
  100%{
  width:200px;
  }
 }

1. 在使用（调用）动画

 @keyframes move {
  0%{
  transform: translateX(0px);
  }
  100%{
  transform: translateX(1400px);
  }
 }
 div {
  width: 200px;
  heigth: 200px;
  background-color: pink;
  animation-name: move;
  animation-duration: 2s;
 }

动画序列

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
• 在@keyframes中规定某项CSS样式，就能常见由当前样式主键改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或者用关键词"from" "to"等同于0%和100%\

里面的百分比就是时间的划分

 ​
 @keyframes move {
  0%{
  transform: translateX(0,0);
  }
  25%{
  transform: translateX(1000px,0);
  }
  50%{
  transform: translateX(1000px,500px);
  }
  75%{
  transform: translateX(0,500px);
  }
  100%{
  transform: translateX(0,0);
  }
 }