鍍金池/ 問答/HTML/ vue在頁面加載完后，文字從屏幕下邊滑入的動畫

vue在頁面加載完后，文字從屏幕下邊滑入的動畫

想在頁面加載完畢的時候，那個冷字從屏幕下面滑入的動畫，剛接觸Vue，不知道怎么寫

clipboard.png

<template>
  <div>
    <p id="cold">冷</p>
    <p id="hot">熱</p>
  </div>
</template>
<script>
export default{
  name: 'Home',
  data () {
    return {
      show: true
    }
  },
}
</script>
<style lane="scss">
  #cold{
    position: absolute;
    top: 45%;
    left: 5%;
  }
  #hot{
    position: absolute;
    top: 0;
    right: 5%;
  }
</style>
回答
編輯回答
過客

動畫效果和vue有什么關(guān)系，平常怎么就怎么寫，具體數(shù)值自己調(diào)整

@keyframes test {
  to {
    top: 45%;
    left: 5%
    opacity: 1;
  }
}
#cold{
    position: absolute;
    bottom: -20px;
    right: -20px;
    animation: test 0.5s 0.5s linear;
    animation-fill-mode: both;
  }
2018年2月5日 03:43