日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

css逐帧动画

發(fā)布時(shí)間：2023/12/29 编程问答 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 css逐帧动画 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們經(jīng)常使用css3中的animation動(dòng)畫(huà)，比如這樣：

.fadeIn{animation: fadeIn .5s ease 1s both; } @keyframes fadeIn{from{opacity:0;}to{opacity:1} }

這樣就實(shí)現(xiàn)了延時(shí)1s，一共0.5s的淡入動(dòng)畫(huà)。其中ease是animation-timing-function的默認(rèn)值。
animation-timing-function使用了三次貝塞爾(Cubic Bezier)函數(shù)生成速度曲線，可以讓我們的動(dòng)畫(huà)產(chǎn)生平滑的過(guò)渡。
但是有的時(shí)候我們并不想要平滑的過(guò)渡，比如想要實(shí)現(xiàn)下面小人跑動(dòng)的效果，該怎么實(shí)現(xiàn)呢？

  • 我們可以將小人跑動(dòng)的動(dòng)作分解，拼成下面的雪碧圖：

    • 通過(guò)設(shè)置不同的background-position設(shè)置不同時(shí)間小人不同的動(dòng)作
    @keyframes run {0% {background-position: 0 0}10%{background-position: -100% 0}20%{background-position: -200% 0}30%{background-position: -300% 0}40%{background-position: -400% 0}50%{background-position: 0 -100%}60%{background-position: -100% -100%}70%{background-position: -200% -100%}80%{background-position: -300% -100%}90%{background-position: -400% -100%}100%{background-position: 0 0} }
    • 用animation讓動(dòng)畫(huà)動(dòng)起來(lái)吧，想讓動(dòng)畫(huà)每幀動(dòng)，而不帶中間的過(guò)渡效果animation-timing-function要設(shè)置成steps函數(shù)
    .people{width: 100px;height: 114px;background: url(../images/people.png);-webkit-animation:run 1s steps(1) 0s infinite both;animation:run 1s steps(1) 0s infinite both; }
  • 小人動(dòng)起來(lái)啦！

或者更簡(jiǎn)單，把雪碧圖拼成這樣：

.people{width: 100px;height: 114px;background: url(../images/people.png);-webkit-animation:run 1s steps(9) 0s infinite both;animation:run 1s steps(9) 0s infinite both; }@-webkit-keyframes run {to{background-position: -900% 0} }

steps函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)會(huì)根據(jù)你指定的步進(jìn)數(shù)量，把整個(gè)動(dòng)畫(huà)切分為多幀，第二個(gè)可選的參數(shù)可以是 start 或 end(默認(rèn))。這個(gè)參數(shù)用于指定動(dòng)畫(huà)在每個(gè)循環(huán)周期的什么位置發(fā)生幀的切換動(dòng)作。還可以使用 step-start 和 step-end 這樣的簡(jiǎn)寫(xiě)屬性,它們分別等同于 steps(1, start) 和 steps(1, end)
很多時(shí)候我們的gif動(dòng)畫(huà)都可以直接用css效果實(shí)現(xiàn)，快來(lái)試試吧！

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.people {width: 110px;height: 114px;overflow: hidden;}.people img {height: 114px;animation: move 1s steps(9) 0s infinite both ;}@keyframes move {from {transform: translateX(0);}to {transform: translateX(-913px);}}</style> </head> <body> <div class="people"><img src="img_1.png" alt=""> </div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的css逐帧动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。