动画animation和过渡transition

动画animation和过渡transition

动画animation

• animation-name 指定要绑定到选择器的关键帧的名称，告诉系统要执行哪个动画

  关键帧：

  ​ @keyframes animationName{

  ​ keyframes-selector{

  ​ css-style;

  ​ }

  }

• animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续时长

  time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

• animation-timing-function 设置动画如何完成一个周期，告诉系统执行的速度

  ​ linear 动画从头到尾的速度是相同的。
  ​ ease 默认。动画以低速开始，然后加快，在结束前变慢。
  ​ ease-in 动画以低速开始。
  ​ ease-out 动画以低速结束。
  ​ ease-in-out 动画以低速开始和结束。
  ​ cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• animation-delay 设置动画在启动前的延迟间隔

  time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

• animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

  n 一个数字，定义应该播放多少次动画
  infinite 无限次往返执行

• animation-direction 指定是否轮流反向播放动画

  normal 默认的取值, 执行完一次之后回到起点继续执行下一次
  alternate 往返动画, 执行完一次之后往回执行下一次
  reverse 反向执行

• animation-fill-mode 规定当动画不播放时(当动画完成或有一个延迟为开始播放时)，要用到的元素样式。

  none: 不做任何改变
  forwards: 让元素结束状态保持动画最后一帧的样式
  backwards: 让元素等待状态的时候显示动画第一帧的样式
  both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

• animation-play-state 告诉系统当前动画是否需要暂停

  running: 执行动画
  paused: 暂停动画

• 动画模块连写格式

  animation: animation-name(动画名字) animation-duration(动画执行时长) animation-timing-function(动画执行的周期函数) animattion-delay(设置动画延迟) animation-iterator-count(动画执行次数) animation-direction(动画执行是否轮回)

2D转换模块transform

• 旋转 rotate

  transform: rotate(45deg)

  其中deg是单位, 代表多少度

• 平移translate

  transform: translate(100px,0px)

  第一个参数:水平方向
  第二个参数:垂直方向

• 缩放scale

  transform: scale(1.5)

  transformLscale(0.5,0.5)

  第一个参数:水平方向
  第二个参数:垂直方向
  注意点:
  如果取值是1, 代表不变
  如果取值大于1, 代表需要放大
  如果取值小于1, 代表需要缩小
  如果水平和垂直缩放都一样, 那么可以简写为一个参数

• transform连写格式

  transform: rotate(45deg) translate(100px,0px) scale(1.5,1.5)

• 形变中心点

  transform-origin:

  ​ 第一个参数:水平方向
  ​ 第二个参数:垂直方向

  注意点
  取值有三种形式
  具体像素
  /transform-origin: 200px 0px;/
  百分比
  /transform-origin: 50% 50%;/
  /transform-origin: 0% 0%;/
  特殊关键字

  ​ /transform-origin: center center;/

• 旋转轴向

  默认情况下所有元素都是围绕Z轴进行旋转

  ​ transform: rotateZ(45deg)

  ​ 围绕Z轴旋转

  ​ transform: rotateX(45deg)

  ​ 围绕X轴旋转

  ​ transform: rotateY(45deg)

  ​ 围绕Y轴旋转

  总结:
  想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

过渡-Transitions

• 过渡三要素

  1. 必须要有属性发生变化
  2. 必须告诉系统哪个属性需要执行过渡效果
  3. 必须告诉系统过渡效果持续时长

• 过渡触发

  1、:hover 鼠标悬停触发

  2、:active 用户单击元素并按住鼠标时触发

  3、:focus 获得焦点时触发

  4、@media触发 符合媒体查询条件时触发

  5、点击事件 用户点击元素时触发

• transiton-property 规定应用过渡的CSS属性的名称

  none 没有属性会获得过渡效果。
  all 所有属性都将获得过渡效果。
  property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

• transition-duration 定义过渡效果花费的时间。默认是0

  time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

• transition-timing-function 规定过渡效果的时间曲线。默认是’ease’

  linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

• transition-delay 规定过渡效果何时开始。默认是0

  time 指定秒或毫秒数之前要等待切换效果开始

注意点

​ transition-property: width, background-color;
​ transition-duration: 5s, 5s;

​ transition 是 transition-property， transition-duration，transition-timing-function，transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

过渡连写格式

transition: 过渡属性 过渡时长 运动速度 延迟时间;
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/
/*transition: background-color 5s linear 0s;*/
/*transition: width 5s,background-color 5s,height 5s;*/

过渡连写注意点

​ 2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
​ 2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
​ 2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
​ transition:all 0s;