关于@keyframes定义动画的问题_html/css_WEB-ITnose
我想让一个长方形先转30度,再向右走200px距离,然后再转330度,最后走回原位。(代码不考虑兼容性)
运行的时候不是按我想的步骤来的,而是:转30度和向右走同时进行,转330度和往回走同时进行。请问为什么?
怎么写正确的代码完成我的要求?
回复讨论(解决方案)
@keyframes donghua
{
0% {width:120px;height:50px;left:0px; top:0px;}
25% {transform:rotate(30deg);left:0px;}
50% {transform:rotate(30deg);left:200px; top:0px;}
75% {transform:rotate(330deg);left:200px;}
100% {transform:rotate(330deg);left:0px; top:0px;}
}
@keyframes donghua{ 0% {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}
@keyframes donghua{ 0% {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}
你写的我倒是看明白了,在25%处定义它在left:0px;就可以不右移。 但我还是很奇怪,即便我没有定义left:0px; ,但我也没有让它右移啊,凭什么它就同时右移了?
@keyframes donghua{ 0% {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}
你写的我倒是看明白了,在25%处定义它在left:0px;就可以不右移。 但我还是很奇怪,即便我没有定义left:0px; ,但我也没有让它右移啊,凭什么它就同时右移了?
@keyframes 本来就可以多个属性同时做动画。每个属性的变化都是独立的
你要求的是时间轴在25%到50%时让left从0变化到200;
可你只在 0% 设置left:0px;, 50% 设置left:200px;
25% 中没有设置left属性。就是25%时不对left影响
这样就是时间轴在0%到50%时让left从0变化到200;

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。
