css3-animation-复习篇

帧动画：

1. @keyframes使用

@keyframes 动画名 {
  from {
    // 开始要的操作的帧动画
    background: #fff;
  }
  to {
    // 结束要的操作的帧动画
    background: #e74c3c;
  }
}

2.调用keyframes动画

标签名 {
  animation: 动画名 执行时间;
}

列如:

<main><main>

@keyframes hd {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
    background-color: #2CA58D;
  }
}
main {
  width: 100px;
  height: 100px;
  background-color: pink;
  /*       动画名 执行时间 执行方式：无限 */
  animation: hd     1s      infinite;
}

效果：

2.1 元素的放大和缩小

transform: scale(放自身大的倍数)

div {
    transform: scale(2);
  }

2.3 设置绑定多个帧动画

• 不能直接写到animation里面，不然只会实现最后一个帧动画。
• 使用animation-name绑定多个帧动画

div {
    
  animation: 4s infinite;
  animation-name: bg,translate;
}

2.3.2 设置缩放-transform

transform: scale(0);

• 使用后导致本div消失，原理是设置缩放大小为最小的0

2.4 设置动画结束后停止，不会到初始状态

• 不可以和无限动画循环（infinite）连用

div {
  animation-fill-mode: forwards;
  /* 可以简写到animation里面 */
  animation: scale 2s forwards;
}

2.5 设置动画执行的次数

div {
    // animation-iteration-count: 执行的次数,第二个动画执行的次数;
    animation-iteration-count: 2;
}

• aria-hidden="true"是什么意思

  • 这一套协定是w3和apple为了残疾人士无障碍使用网站

    例如视障人士, 在读到这一句 aria-hidden="true 的时候, 就会自动忽略跳过

<i aria-hidden="true"><i>

2.6 设置动画播放顺序

li:nth-child(1)>i{
  /* 正常播放动画 */
  animation-direction: normal;
}
li:nth-child(2)>i{
  /* 翻转动画 */
  animation-direction: reverse;
}
li:nth-child(3)>i{
  /* 轮流动画 */
  animation-direction: alternate;
}
li:nth-child(3)>i{
  /* 多次循环平滑过渡动画 */
  animation-direction: alternate-reverse;
}

  /* filter模糊滤镜，范围25px */
  filter: blur(5px);

  /* animation-delay延迟2s执行动画 */
  animation-delay: 2s;

2.7 帧动画-细调

normal 原始状态到原始状态，backword 起始帧到原始状态 ， forward 起始状态到结束帧 ， both 起始帧到结束帧

1.方法一

  /* 设置一开始消失（缩放到0），设置保持结束帧（缩放100%） */
  transform: scale(0);
  animation-fill-mode: forwards;

2.方法二

  /* 立即应用第一个关键帧中定义的值 */
  animation-fill-mode: backwards;

2.8 贝塞尔曲线动画

li:nth-child(1) {
  /* 过渡的帧 */
  animation-timing-function: ease;
}
li:nth-child(2) {
  /* 过渡的帧,先慢到快 */
  animation-timing-function: ease-in;
}
li:nth-child(3) {
  /* 过渡的帧，先快再到慢 */
  animation-timing-function: ease-out;
}
li:nth-child(4) {
  /* 过渡的帧，中间快两边慢 */
  animation-timing-function: ease-in-out;
}
li:nth-child(5) {
  /* 过渡的帧，线性 */
  animation-timing-function: linear;
}
li:nth-child(6) {
  /* 自定义贝赛尔曲线, */
 /* https://cubic-bezier.tupulin.com/#cubic-bezier(0.44,-0.32,0.42,1.19) */
  animation-timing-function: cubic-bezier(0.44, -0.32, 0.42, 1.19);
}

2.9设置背景颜色和文本一致

  /* currenColor获取文本的颜色 */
  background-color: currentColor;

2.10 用伪类+阴影实现加载小点

button::after {
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  /* box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor; */
  animation: hd 1s infinite;
}

@keyframes hd {
  from {
    box-sizing: none;
  }

  30% {
    box-sizing: 3px 0 0 currentColor;
  }

  60% {
    box-sizing: 3px 0 0 currentColor, 9px 0 0 currentColor;
  }

  90% {
    box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor;
  }
}

2.11 进步动画规则

/* 按照4次，从开始就跑 */
  animation-timing-function: steps(4,start);
/* 动画开始后再跑 */
  animation-timing-function: steps(4,end);

2.12 暂停动画属性

div:hover::before {
  /* 鼠标移动到div时，暂停动画 */
  animation-play-state: paused;
}

2.13 开启动画属性

main:hover div::before {
  /* 移动div上，开启动画 */
  animation-play-state: running;
}

3. 栅格化布局

  /* 栅格布局 */
  display: grid;
  /* 划分三行，上10vh，中间自适应，下10vh */
  grid-template-rows: 10vh 1fr 10vh;

  /* 弹性盒模型，按列排列 */
  display: flex;
  flex-direction: column;

  /* 栅格布局,自适应，且只有一个 */
  grid-template: 1fr/1fr;

/* 栅格化布局，1行5列自适应 */
  display: grid;
  grid-template: 1fr/repeat(5,1fr);
  /* 间距 */
  gap: 10px;