CSS Animation

解説

  1. @keyframes 指定動畫名稱
    0%
    位置
    100%
    位置
  2. 要動的元素增加一行
    animation:  動畫名稱  秒數  次數

範例

.box
 .block 上下移動
.box
 width: 350px
 height: 300px
 border: solid 1px
 position: relative
 
.block
 width: 50px
 height: 50px
 border: solid 1px
 position: absolute
 bottom: 0px
 left: 150px
 animation: ani1 2s infinite
 
@keyframes ani1
 0%
   bottom: 250px
 50%
   bottom: 0px
 100%
   bottom: 250px

Display

上下移動

Leave a Reply

Your email address will not be published. Required fields are marked *