css小动画效果记录

1、小飞机起飞
思路： 设置一个class样式为：1秒时长的动画让dom元素从左下方快速移到右上方；

        <div class="fly item">
          <el-icon v-show="toFly" :class="toFly ? 'to-fly' : ''">
            <Promotion />
          </el-icon>
          <el-button @click="iCanFly">起飞</el-button>
        </div>

    // 起飞
    iCanFly() {
      this.toFly = true
      setTimeout(() => {
        this.toFly = false
      }, 1000)
    },

  .to-fly {
    font-size: 140px;
    color: var(--theme-color);
    position: fixed;
    z-index: 99;
    left: -10%;
    top: 90%;
    -webkit-animation: tohide 1s ease 1 forwards;
    -moz-animation: tohide 1s ease 1 forwards;
    animation: tohide 1s ease 1 forwards;
  }

  @keyframes tohide {
    from {
      left: -10%;
      top: 90%;
    }
    to {
      left: 110%;
      top: -20%;
    }
  }

2、列表轮播滚动、鼠标悬浮暂停
思路：设置单个动画周期为4秒，每隔4秒父元素壳子向上移动一个子元素的高度，4秒内所有子元素匀速向上移动一个子元素的高度

    <div class="item-bar" :style="yStyle">
      <div class="title">纵向滚动信息块</div>
      <div ref="songListY" class="content song-y">
        <div class="sonf-list-y">
          <div
            v-for="(item, index) in song.y"
            ref="songItemY"
            :key="'y' + index"
            class="song-item"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>

	song: {	y: ['……', ……]},
	yTimer: null,
	yStyle: {}
	
	
    getAnimation() {
      const yItemDom =
        this.$refs.songItemY instanceof Array
          ? this.$refs.songItemY[0]
          : this.$refs.songItemY
      this.yStyle = {
        '--time': '4s',
        '--length': this.song.y.length,
        '--height': yItemDom.offsetHeight
      }
      const yListDom = this.$refs.songListY
      const n2 = Math.ceil(yListDom.offsetHeight / yItemDom.offsetHeight) || 4
      const repeatArrY = this.song.y.slice(0, n2)
      this.song.y = this.song.y.concat(repeatArrY)

      // 鼠标悬浮 暂停动画
      this.$nextTick(() => {
        // 拿到 dom
        const yList = this.$refs.songListY.firstChild
        const yItem = this.$refs.songItemY
        // 监听事件
        yList.addEventListener('mouseenter', () => {
          // 暂停动画
          yList.style.animationPlayState = 'paused'
          yItem.forEach((e) => {
            e.style.animationPlayState = 'paused'
          })
        })
        yList.addEventListener('mouseleave', () => {
          // 开始动画
          yList.style.animationPlayState = 'running'
          yItem.forEach((e) => {
            e.style.animationPlayState = 'running'
          })
        })
      })
    }


  .song-y {
    width: 100%;
    max-height: 260px;
    overflow: hidden !important;
    .sonf-list-y {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      animation: ylistMove calc(var(--time) * var(--length))
        steps(var(--length)) infinite;
    }
    .song-item {
      width: 100%;
      flex-shrink: 0;
      margin-bottom: 5px;
      animation: yitemMove var(--time) infinite;
    }
  }
  @keyframes ylistMove {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(var(--height) * calc(var(--length) * -1px)));
    }
  }
  @keyframes yitemMove {
    0% {
      transform: translateY(0);
    }
    80%,
    100% {
      transform: translateY(calc(var(--height) * -1px));
    }
  }
	

3、元素上下浮动
思路：一直上下移动…

<img class="public-img" src="" >

.public-img {
      cursor: pointer;
      animation: floatUpOrDown 2s linear infinite;
    }
    @keyframes floatUpOrDown {
      25% {
            -webkit-transform: translateY(-4px);
       }
       50%, 100% {
            -webkit-transform: translateY(0);
       }
       75% {
            -webkit-transform: translateY(4px);
       }
    }