css動畫

致爱丽丝發表於2024-10-18

幾年前與一個同事共同開發一個專案,當時只知道css3但是並沒有實際用過,看了她寫的頁面著實給了我一個很大的震撼,今天因故翻到了她寫的程式碼,現在來看,感慨萬千

//這是一個dom
    & > .left {
    animation: 0.4s ease enter_from_left;
    }
//這是另一個dom
  & > .right {
    animation: 0.4s ease 0.4s enter_from_right;    
  }
      
    @keyframes enter_from_left {
    from {
      transform: translateX(-260px);
    }
    to {
      transform: translateX(0%);
    }
  }
  @keyframes enter_from_right {
    from {
      transform: translateX(400px);
    }
    to {
      transform: translateX(0%);
    }
  }
  

效果是初始化後分別從兩邊進來,做個紀念
灰常感謝我滴王樂小師傅
以上

相關文章