国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

animation.css無法顯示動(dòng)畫效果問題解決

2年前作者：THE WHY分類：Toy博客閱讀(21)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了animation.css無法顯示動(dòng)畫效果問題解決。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

在使用【微信開發(fā)者工具】開發(fā)微信小程序時(shí)發(fā)現(xiàn)無法在開發(fā)者工具中展示出動(dòng)畫效果來

但是真機(jī)調(diào)試中可以正常的顯示動(dòng)畫效果

【關(guān)于微信小程序中如何使用animation.css，參考微信小程序使用animation.css_THE WHY的博客-CSDN博客?】

同時(shí)發(fā)現(xiàn)在官網(wǎng)上點(diǎn)擊各個(gè)動(dòng)畫并不能展示動(dòng)畫效果，并有以下提示：

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

Hey! It seems that you have animations disabled on your OS, turning Animate.css off.

Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.

其中提到了一個(gè)CSS屬性，叫做：prefers-reduced-motion

于是去網(wǎng)上查看相關(guān)文檔：

prefers-reduced-motion - CSS: Cascading Style Sheets | MDN

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

簡單來說就是用于檢測(cè)用戶的系統(tǒng)是否開啟了動(dòng)畫減弱功能

接著往下看是該屬性的使用方式：

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

然后是該屬性的取值：

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

no-preference表示用戶未進(jìn)行任何設(shè)置

reduce表示用戶修改了系統(tǒng)設(shè)置，將一些不必要的動(dòng)畫效果移除

然后接著往下看可以看到reduce這個(gè)參數(shù)的使用情況：

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

注意到在Windows10系統(tǒng)中，但我們?cè)凇驹O(shè)置】中修改了【在Windows中顯示動(dòng)畫】的設(shè)置時(shí)，該屬性會(huì)生效

同時(shí)注意到提示信息中猜測(cè)可能在電腦操作系統(tǒng)中禁用了動(dòng)畫效果；（It seems that you have animations disabled on your OS）

并且我們查看animation.css的源碼：

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

發(fā)現(xiàn)該屬性的值為reduce

至此問題的定位基本明確

于是打開【設(shè)置】，搜索【動(dòng)畫】

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

打開【在Windows中顯示動(dòng)畫】

animation.css無法顯示動(dòng)畫效果問題解決,微信小程序,全棧,css,前端,微信小程序

發(fā)現(xiàn)果然關(guān)閉了在Windows中顯示動(dòng)畫的功能

接著我們打開該功能即可；

會(huì)發(fā)現(xiàn)動(dòng)畫效果一切正常了文章來源地址http://www.zghlxwxcb.cn/news/detail-562418.html

到了這里，關(guān)于animation.css無法顯示動(dòng)畫效果問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

css的animation動(dòng)畫
創(chuàng)建動(dòng)畫序列，需要使用 animation 屬性或其子屬性，該屬性允許配置動(dòng)畫時(shí)間、時(shí)長以及其他動(dòng)畫細(xì)節(jié)，但該屬性不能配置動(dòng)畫的實(shí)際表現(xiàn)，動(dòng)畫的實(shí)際表現(xiàn)是由 @keyframes 規(guī)則實(shí)現(xiàn) 屬性描述 animation-name 指定由 @keyframes 描述的關(guān)鍵幀名稱 animation-duration 設(shè)置動(dòng)畫一個(gè)周期的時(shí)長
2024年02月06日
瀏覽(42)
animate.css 動(dòng)畫
Animate.css | A cross-browser library of CSS animations. class=\\\"animate__bounce\\\" 1.? ? bounce ? ? ? ? ? ? 彈跳 2.?? ?flash ? ? ? ? ? ? ?閃爍 3.?? ?pulse ? ? ? ? ? ? ?放大，縮小 4.?? ?rubberBand ? ? ? ? 放大，縮小，彈簧 5.?? ?shake ? ? ? ? ? ? ?左右晃動(dòng) 6.?? ?headShake ? ? ? ? ?左右小幅
2024年02月11日
瀏覽(28)
css動(dòng)畫（animation）常用屬性
? ??? ??? ??? ??? ??? ???? 1.animation-name：動(dòng)畫名稱 ?? ??? ??? ??? ??? ??? ??? ??? ??? ? ?2.@keyframes：動(dòng)畫定義，后面跟動(dòng)畫名稱 ?? ??? ??? ??? ??? ??? ??? ??? ??? ? 3.animation-duration：動(dòng)畫持續(xù)時(shí)長，單位（s） ?? ??? ??? ??? ??? ??? ?
2023年04月27日
瀏覽(26)
CSS中animation動(dòng)畫-詳解
1、animation有什么組成？ Animations由兩部分組成：css動(dòng)畫的配置，以及一系列的keyframes（用來描述動(dòng)畫的開始、過程、結(jié)束狀態(tài)）。不需要了解任何Js技術(shù)即可完成動(dòng)畫的制作 2、關(guān)鍵幀應(yīng)該怎么表示？ 0%表示動(dòng)畫的初始時(shí)間，也可以通過from表示。100%表示動(dòng)畫的結(jié)束時(shí)間
2024年02月01日
瀏覽(18)
CSS animation動(dòng)畫使用詳解
目錄一、animation動(dòng)畫的使用步驟第一步:定義動(dòng)畫第二步:使用動(dòng)畫二、animation的復(fù)合屬性三、animation的拆分屬性四、動(dòng)畫屬性 animation:動(dòng)畫名稱動(dòng)畫時(shí)長速度曲線延遲時(shí)間重復(fù)次數(shù) 動(dòng)畫方向執(zhí)行完畢時(shí)的狀態(tài) 逐幀動(dòng)畫(配合精靈圖使用) animation-timing-function:step(N) N為將動(dòng)
2024年02月16日
瀏覽(28)
神仙般的css動(dòng)畫參考網(wǎng)址，使用animate.css
Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. https://animate.style/ 這里面有很多簡單的css樣式，可以引這個(gè)包，但是也可以根據(jù)他的源碼改動(dòng)一下，很簡
2024年02月11日
瀏覽(11)
CSS筆記——觸發(fā)式動(dòng)畫Transition、主動(dòng)式動(dòng)畫Animation、Transfrom 動(dòng)畫、CSS 3D 動(dòng)畫、陰影和濾鏡樣式
一、觸發(fā)式動(dòng)畫Transition transition過渡動(dòng)畫，一般配合偽類使用屬性值： transition-duration：指定過渡效果的持續(xù)時(shí)間，以秒或毫秒為單位。 transition-timing-function：指定過渡效果的時(shí)間函數(shù)，即控制過渡速度的函數(shù)。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。 transi
2024年02月07日
瀏覽(22)
HTML之CSS Animation 屬性常用動(dòng)畫
引入下面的樣式表后 -webkit-animation: tada 1s ease 0.3s infinite both; -webkit-animation: name duration timing-function delay iteration_count direction animation 各個(gè)參數(shù)詳細(xì)用法請(qǐng)看 https://www.w3school.com.cn/css/css3_animations.asp cubic-bezier 生成器 https://cubic-bezier.com
2024年01月19日
瀏覽(20)
微信小程序做登錄密碼顯示隱藏效果并解決安卓手機(jī)端隱藏密碼時(shí)小黑點(diǎn)顯示過大問題
?在編輯器和蘋果手機(jī)上面顯示就是正常的大小，在安卓手機(jī)上面黑點(diǎn)就非常大，需要單獨(dú)調(diào) ? 安卓手機(jī)顯示比較大 ?wxml 注意：在html中的input是通過切換type的屬性值來實(shí)現(xiàn)隱藏顯示的在微信小程序的input里面type沒有password屬性是通過password屬性的true或者false來設(shè)置是否為密
2024年02月15日
瀏覽(53)
微信小程序animation動(dòng)畫，微信小程序animation動(dòng)畫無限循環(huán)播放
需求是醬紫的：頁面頂部的喇叭通知，內(nèi)容不固定，寬度不固定，就是做走馬燈（輪播）效果，從左到右的走馬燈（輪播），每播放一遍暫停 1500ms ～ 2000ms 剛開始想的是 css 的 position: relative + animation，如果寬度固定還好說，寬度不固定，用百分比的話，想象很美好，現(xiàn)實(shí)很
2024年02月13日
瀏覽(25)