9.变形、动画

1.变形：transform

　　(1) translate(x,y)：平移
      　　translateX(x)：沿X轴平移
      　　translateY(y)：沿y轴平移

<img src="../../assets/imgs/img3.jpg" style="transform:translate(20px,15px)">

　　(2) scale(x,y)：缩放
      　　scaleX(x)：沿X轴缩放
      　　scaleY(y)：沿y轴缩放
      　　transform-origin: center left：缩放后调整对齐的位置

<img src="../../assets/imgs/img3.jpg" style="transform:scale(0.6);transform-origin:center top">

　　(3) skew(x-angle,y-angle)：倾斜
     　　 skewX(angle)：沿X轴倾斜
      　　skewY(angle)：沿y轴倾斜

<img src="../../assets/imgs/img3.jpg" style="transform:skewX(30deg)">
<img src="../../assets/imgs/img3.jpg" style="transform:skewY(30deg)">

　　(4) rotate(180deg)：角度旋转
      　　rotate(180rad)：弧度旋转
     　　 rotateX(180deg)：沿X轴旋转（上下翻转）
      　　rotateY(180deg)：沿y轴旋转（左右翻转）

//左右翻转
<img src="../../assets/imgs/img3.jpg" style="transform:rotateY(180deg)">
//上下翻转
<img src="../../assets/imgs/img3.jpg" style="transform:rotateX(180rad)">

　　(5) 3D变形，就是在2D变形的基础上，多了z轴的参数：

 

 

2.动画

　　(1) transition-property:all：规定应用过渡的css属性的名称
　　(2) transition-duration:5s：过渡效果的花费时间，单位是秒或毫秒，默认是0
　　(3) transition-timing-function:ease-in：完成动画的速度控制，默认是ease
      　　· linear：以相同速度开始至结束。等同于cubic-bezier(0,0,1,1)
      　　· ease：慢速开始，然后变快，然后慢速结束。等同于cubic-bezier(0.25,0.1,0.25,0.1)
     　　 · ease-in：慢速开始。等同于cubic-bezier(0.42,0,1,1)
     　　 · ease-out：慢速结束。等同于cub ic-bezier(0,0,0.58,1)
     　　 · ease-in-out：慢速开始和结束。等同于cubic-bezier(0.42,0,0.58,1)
      　　· cubic-bezier：定义自己的值。值在0-1之间
　　(4) transition-delay:2s：规定过渡效果何时开始，默认是0

<div class="transition">鼠标悬浮看效果</div>

//css样式
.transition{
    color: red;
    width: 150px;
    height: 150px;
    background: url('../../assets/imgs/img3.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
.transition:hover{
    transform:rotateY(180deg); //水平翻转
    transition-property:all; //应用过渡的css属性的名称
    transition-duration:5s; //动画持续时间5s
    transition-timing-function:linear; //以相同速度开始至结束
    transition-delay:0 //延迟0s
}

 

 

3.自定义动画

　　(1) @keyframes：设定动画规则，可以理解为动画的剧本
　　(2) animation-name:xxx：动画的名称
　　(3) animation-duration:3s：动画完成需要的时间
　　(4) animation-timing-function:linear：完成动画的速度设置（同transition）
     　　 · linear：以相同速度开始至结束。等同于cubic-bezier(0,0,1,1)
     　　 · ease：慢速开始，然后变快，然后慢速结束。等同于cubic-bezier(0.25,0.1,0.25,0.1)
      　　· ease-in：慢速开始。等同于cubic-bezier(0.42,0,1,1)
     　　 · ease-out：慢速结束。等同于cub ic-bezier(0,0,0.58,1)
     　　 · ease-in-out：慢速开始和结束。等同于cubic-bezier(0.42,0,0.58,1)
      　　· cubic-bezier：定义自己的值。值在0-1之间
　　(5) animation-delay:1s：动画延迟的时间
　　(6) animation-iterarion-count:infinite：规定动画播放的次数
      　　· 默认是1
     　　 · infinite：无限次
　　(7) animation-direction:alternate：规定动画在下一周期是否逆向播放
     　　 · normal：顺向播放（默认值）
     　　 · alternate：逆向播放
　　(8) animation-play-state:running：规定动画是否正在运行或暂停
      　　· running：正在播放（默认值）
    　　  · paused：动画暂停
　　(9) animation-fill-mode:backwards：规定动画时间之外的状态
     　　 · none：回到起始位置
     　　 · forwards：设置最后一帧：forwards当动画完成后，保持最后一帧的状态
     　　 · backwards：设置第一帧：backwards延时的时间段内，在动画显示之前，应用开始的属性
     　　 · both：同时应用forwards，backwards

<div class="animation"></div>

//css样式
// from···to··· 只能表示一个开始和一个结束，过于简单
@keyframes dh1 {
  from {transform: rotateY(0);}
  to {transform: rotateY(180deg);}
}
// 用百分比可以表示更复杂的动画
@keyframes dh2 {
  0% {margin-left: 0;}
  50% {margin-left: 50px;}
  100% {margin-left: 100px;}
}
// 给div绑定自定义的动画
.animation {
  width: 150px;
  height: 150px;
  background: url("../../assets/imgs/img3.jpg");
  background-repeat: no-repeat;
  background-size: 100%;

  animation-name: dh1; //动画名称
  animation-duration: 3s; //完成动画时间
  animation-timing-function: linear; //完成动画的速度设置
  animation-iteration-count: infinite; //规定动画播放次数
  animation-direction: alternate; //规定动画在下一周期是否逆向播放
  animation-play-state: running; //规定动画是否正在运行
  animation-fill-mode: backwards; //规定动画之外的动态
}