CSS3實現放大縮小動畫
阿新 • • 發佈:2018-11-10
HTML
<div> <div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div> </div>
CSS
#animat{ position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ animation-direction:alternate;/*輪流反向播放動畫。*/ animation-timing-function: ease-in-out; /*動畫的速度曲線*/ /* Safari 和 Chrome */ -webkit-animation:mymove 5s infinite; -webkit-animation-direction:alternate;/*輪流反向播放動畫。*/ -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/ } @keyframes mymove { 0%{ transform: scale(1); /*開始為原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } } @-webkit-keyframes mymove /*Safari and Chrome*/ { 0%{ transform: scale(1); /*開始為原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } }