前端基础HTML5CSS3动画
生活随笔
收集整理的這篇文章主要介紹了
前端基础HTML5CSS3动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女戰士$</title><style>/*animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 3
animation-delay 規定動畫何時開始。默認是 0。 3
animation-iteration-count 規定動畫被播放的次數。默認是 1。 3次 infinite 無限
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。alternate 反向播放
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。 3
animation-fill-mode 規定對象動畫時間之外的狀態。*/.box {height: 300px;width: 300px;background-color: lime;/*動畫 先定義后使用*//*動畫屬性 animation:動畫名字 動畫持續時間s 延時時間 s 運動曲線 往返運動 *//*動畫屬性 animation:動畫名字 動畫持續時間S 延時時間S 運動曲線 往返運動*/animation: donghua 3s linear 0.5s infinite ;}/*執行幾次是指單向運動，往算一次，沿原路線返回也算一次，動畫結束后直接返回原狀態不是往返運動*//*只有在執行多次時才能做往返運動 *//*不做往返運動時不論執行多少次都是單向運動*/@keyframes donghua{0%{margin-left: 0;margin-top: 0;}/*linear直線的 linear*//*0% 最初20% 50% 75%100% 最終*/25%{margin-top: 300px;margin-left: 300px;}50%{margin-left: 600px;margin-top: 0;}100%{margin-left: 900px;margin-top: 300px;}}/*background-color: #a71d5d;*//*border-radius: 30px;*//*border: 2px solid black;*//*transform: translateX(400px);*//*border-radius: 50%;*/</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的前端基础HTML5CSS3动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端HTML5CSS3动画
- 下一篇： 前端HTML5css3阴影凹凸文字