css3 新特性的 animation 与 translate 使用初探

最新推荐文章于 2021-08-04 08:17:24 发布

qq_42680313

最新推荐文章于 2021-08-04 08:17:24 发布

阅读量1k

点赞数 3

分类专栏：前端基础文章标签： javascript css3 html

本文链接：https://blog.csdn.net/qq_42680313/article/details/110123367

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 translate

可以改变元素在页面中的位置，类似定位；

1 语法

transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);

div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translate(12px, 20px);
}

2 重点：
- 沿 x 和 y 轴进行移动；
- translate 最大的优点：不会影响到其他元素的位置；
  - 可以用于鼠标经过时图片上浮特效；
  - 见 css3（02）=> 19；
- translate 中的百分比单位是相对于元素自身的 translate:(50%, 50%)；
  - 如 width 为 100px，横向移动 50% 就是移动 50px；
  - 使用 translate 的百分比实现居中：
```
div {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* 这里移动的 50% 就是 50px */
    transform: translate(-50%, -50%);
}
```
- 对行内元素没有作用；

2 animation

动画（animation）是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，用于实现复杂的动画效果；
相交过渡，动画可以实现更多变化，更多控制，连续自动播放等效果；

2.1 动画的基本使用

制作动画分为两步：

1 先定义动画；
2 再使用（调用）动画；

1 使用 keyframes 定义动画（类似应以类选择器）

@keyframes 动画名称 {
    0% {
        width: 100px;
    }

    100% {
        width: 200px;
    }
}

动画序列
- 0% 是动画的开始，100% 是动画的完成，这样的规则就是动画序列；
- 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式主键改为新样式的动画效果；
- 动画是使元素从一种样式主键变化为另一种样式的效果，可以改变任意多的样式和任意多的次数；
- 用百分比来规定变化发生的事件，或用“ from ”和“ to ”，等同于 0% 和 100% ；

2 元素使用动画

div {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    background-color: greenyellow;

    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续事件 */
    animation-duration: 持续时间;
    
}

2.2 动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除 anmiation-play-state 属性
animation-name	规定 @keyframes 动画的名称（必须）
animation-duration	规定动画的完成时间（必须）
animation-time-function	规定动画的速度曲线，默认是 0
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“ normal ”，“ alternate ”逆播放
animation-play-state	规定动画是否正在运行或暂停，默认“ running ”，还有“ pause ”
animation-fill-mode	规定动画结束后状态， forwards 停留在动画结束位，回到起始位 backwards

2.3 动画简写属性

语法

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

简写属性中不包含 animation-play-state；
暂停动画：animation-play-state: puased; 经常和鼠标经过等配合使用；
想要动画来回走 animation-direction: alternate;
动画结束后停在结束位置 animation-fill-node: forwards;
animation-time-function 的 steps(n) 函数，指定了整个动画平均分几步走完；
需要添加多个动画时，用逗号隔开即可；
- animation: bear 1s step(8) infinite, moves 1s;

2.4 动画事件监听

1 animationstart 动画开始事件；
2 animationEnd 动画结束事件；
3 animationiteration 动画循环事件；

3 以多个 div 为例的循环 animation、鼠标进入 transform、加载时的一次性 animation 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .body {
    display: flex;
    justify-content: space-between;
    width: 800px;
    height: 100px;
    overflow: hidden;
  }
  .items {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 500px;
    background-color: rgba(255, 177, 177, .6);
    /* infinite：保持动画不停止；linear：匀速动画 */
    animation: move 5s infinite linear;
  }
  @keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -400px);
    }
  }
  .items:hover {
    animation-play-state: paused;
  }

  .items2 {
    flex-grow: 1;
    max-width: 100px;
    min-width: 100px;
    height: 100px;
    background-color: yellowgreen;
    /* 同样可以设置匀速 */
    transition: transform 1s;
  }

  .items2:hover {
    transform: translate(30px, 30px);
  }

  .body2 {
    width: 200px;
    height: 50px;
    background-color: skyblue;
    animation: initialMove 2s;
  }

  @keyframes initialMove {
    0% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(0, 40px);
    }

    100% {
      transform: translate(0, 0);
    }
  }
</style>
<body>
  <div class="body">
    <div class="items">
      <div class="item-in-items">start</div>
      <div class="item-in-items">middle1</div>
      <div class="item-in-items">middle2</div>
      <div class="item-in-items">middle3</div>
      <div class="item-in-items">end</div>
    </div>
    <div class="items2"></div>
  </div>
  <div class="body2">

  </div>

  <script>
    const doms = document.querySelectorAll('.item-in-items')
    for (let dom of doms) {
      dom.onclick = function () {
        console.log('clicked')
      }
    }
    const items = document.querySelector('.items')
    // 监听动画开始
    // 如果是滚动播放，此处可以请求新数据
    items.addEventListener("animationstart", function () {
      console.log('animation start')
    }, false);
    // 监听动画结束，在此无效
    items.addEventListener("animationEnd", function () {
      console.log('animation end')
    }, false);
    // 监听重复动画
    // 如果是滚动播放，此处可以放入新数据
    items.addEventListener("animationiteration", function () {
      console.log('animation iteration')
    }, false);
  </script>
</body>
</html>

qq_42680313

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3 新特性的 animation 与 translate 使用初探

1 translate可以改变元素在页面中的位置，类似定位；1 语法transform: translate(x, y);transform: translateX(n);transform: translateY(n);div { width: 200px; height: 200px; background-color: skyblue; transform: translate(12px, 20px);}2 重点：沿 x 和 y 轴进行移动；
复制链接

扫一扫