Style animation 属性

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML 对象

</a></li> <li><a href="/ha/jsref/dom_obj_image.html" title="Obitun Image na DOM na HTML"><img></a></li> <li><a href="/ha/jsref/dom_obj_ins.html" title="Obitun Ins na DOM na HTML"><ins></a></li> <li><a href="/ha/jsref/dom_obj_button.html" title="HTML DOM Input Button ɗanar"><input> button</a></li> <li><a href="/ha/jsref/dom_obj_checkbox.html" title="HTML DOM Input Checkbox ɗanar"><input> checkbox</a></li> <li><a href="/ha/jsref/dom_obj_color.html" title="HTML DOM Input Color ɗanar"><input> color</a></li> <li><a href="/ha/jsref/dom_obj_date.html" title="HTML DOM Input Date ɗanar"><input> date</a></li> <li><a href="/ha/jsref/dom_obj_datetime.html" title="HTML DOM Input Datetime ɗanar"><input> datetime</a></li> <li><a href="/ha/jsref/dom_obj_datetime-local.html" title="HTML DOM Input DatetimeLocal ɗanar"><input> datetime-local</a></li> <li><a href="/ha/jsref/dom_obj_email.html" title="HTML DOM Input Email ɗanar"><input> email</a></li> <li><a href="/ha/jsref/dom_obj_fileupload.html" title="HTML DOM Input FileUpload ɗanar"><input> file</a></li> <li><a href="/ha/jsref/dom_obj_hidden.html" title="HTML DOM Input Hidden ɗanar"><input> hidden</a></li> <li><a href="/ha/jsref/dom_obj_input_image.html" title="HTML DOM Input Image ɗanar"><input> image</a></li> <li><a href="/ha/jsref/dom_obj_month.html" title="HTML DOM Input Month ɗanar"><input> month</a></li> <li><a href="/ha/jsref/dom_obj_number.html" title="HTML DOM Input Number ɗanar"><input> number</a></li> <li><a href="/ha/jsref/dom_obj_password.html" title="HTML DOM Input Password ɗanar"><input> password</a></li> <li><a href="/ha/jsref/dom_obj_radio.html" title="HTML DOM Input Radio ɗanar"><input> radio</a></li> <li><a href="/ha/jsref/dom_obj_range.html" title="HTML DOM Input Range ɗanar"><input> range</a></li> <li><a href="/ha/jsref/dom_obj_reset.html" title="HTML DOM Input Reset ɗanar"><input> reset</a></li> <li><a href="/ha/jsref/dom_obj_search.html" title="HTML DOM Input Search ɗanar"><input> search</a></li> <li><a href="/ha/jsref/dom_obj_submit.html" title="HTML DOM Input Submit ɗanar"><input> submit</a></li> <li><a href="/ha/jsref/dom_obj_text.html" title="HTML DOM Input Text ɗanar"><input> text</a></li> <li><a href="/ha/jsref/dom_obj_input_time.html" title="HTML DOM Input Time ɗanar"><input> time</a></li> <li><a href="/ha/jsref/dom_obj_url.html" title="HTML DOM Input URL ɗanar"><input> url</a></li> <li><a href="/ha/jsref/dom_obj_week.html" title="HTML DOM Input Week ɗanar"><input> week</a></li> <li><a href="/ha/jsref/dom_obj_kbd.html" title="HTML DOM Kbd ɗanar"><kbd></a></li> <li><a href="/ha/jsref/dom_obj_label.html" title="HTML DOM Label ɗanar"><label></a></li> <li><a href="/ha/jsref/dom_obj_legend.html" title="HTML DOM Legend ɗanar"><legend></a></li> <li><a href="/ha/jsref/dom_obj_li.html" title="HTML DOM Li ɗanar"><li></a></li> <li><a href="/ha/jsref/dom_obj_link.html" title="HTML DOM Link ɗanar"><link></a></li> <li><a href="/ha/jsref/dom_obj_map.html" title="HTML DOM Map ɗanar"><map></a></li> <li><a href="/ha/jsref/dom_obj_mark.html" title="HTML DOM Mark ɗanar"><mark></a></li> <li><a href="/ha/jsref/dom_obj_menu.html" title="HTML DOM Menu ɗanar"><menu></a></li> <li><a href="/ha/jsref/dom_obj_menuitem.html" title="HTML DOM MenuItem ɗanar"><menuitem></a></li> <li><a href="/ha/jsref/dom_obj_meta.html" title="HTML DOM Meta ɗanar"><meta></a></li> <li><a href="/ha/jsref/dom_obj_meter.html" title="HTML DOM Meter ɗanar"><meter></a></li> <li><a href="/ha/jsref/dom_obj_nav.html" title="HTML DOM Nav ɗanar"><nav></a></li> <li><a href="/ha/jsref/dom_obj_object.html" title="HTML DOM Object ɗanar"><object></a></li> <li><a href="/ha/jsref/dom_obj_ol.html" title="HTML DOM Ol ɗanar"><ol></a></li> <li><a href="/ha/jsref/dom_obj_optgroup.html" title="HTML DOM OptionGroup ɗanar"><optgroup></a></li> <li><a href="/ha/jsref/dom_obj_option.html" title="HTML DOM Option ɗanar"><option></a></li> <li><a href="/ha/jsref/dom_obj_output.html" title="HTML DOM Output ɗanar"><output></a></li> <li><a href="/ha/jsref/dom_obj_paragraph.html" title="HTML DOM Paragraph ɗanar"><p></a></li> <li><a href="/ha/jsref/dom_obj_param.html" title="HTML DOM Parameter ɗanar"><param></a></li> <li><a href="/ha/jsref/dom_obj_pre.html" title="HTML DOM Pre ɗanar"><pre></a></li> <li><a href="/ha/jsref/dom_obj_progress.html" title="HTML DOM Progress ɗanar"><progress></a></li> <li><a href="/ha/jsref/dom_obj_quote.html" title="HTML DOM Quote ɗanar"><q></a></li> <li><a href="/ha/jsref/dom_obj_s.html" title="HTML DOM S ɗanar"><s></a></li> <li><a href="/ha/jsref/dom_obj_samp.html" title="HTML DOM Samp ɗanar"><samp></a></li> <li><a href="/ha/jsref/dom_obj_script.html" title="HTML DOM Script ɗanar"><script></a></li> <li><a href="/ha/jsref/dom_obj_section.html" title="HTML DOM Section ɗanar"><section></a></li> <li><a href="/ha/jsref/dom_obj_select.html" title="HTML DOM Select ɗanar"><select></a></li> <li><a href="/ha/jsref/dom_obj_small.html" title="HTML DOM Small ɗanar"><small></a></li> <li><a href="/ha/jsref/dom_obj_source.html" title="HTML DOM Source ɗanar"><source></a></li> <li><a href="/ha/jsref/dom_obj_span.html" title="HTML DOM Span ɗanar"><span></a></li> <li><a href="/ha/jsref/dom_obj_strong.html" title="HTML DOM Strong ɗanar"><strong></a></li> <li><a href="/ha/jsref/dom_obj_sub.html" title="HTML DOM Subscript ɗanar"><sub></a></li> <li><a href="/ha/jsref/dom_obj_summary.html" title="HTML DOM Summary ɗanar"><summary></a></li> <li><a href="/ha/jsref/dom_obj_sup.html" title="HTML DOM Superscript ɗanar"><sup></a></li> <li><a href="/ha/jsref/dom_obj_table.html" title="HTML DOM Table ɗanar"><table></a></li> <li><a href="/ha/jsref/dom_obj_tbody.html" title="HTML DOM TBody ɗanar"><tbody></a></li> <li><a href="/ha/jsref/dom_obj_tabledata.html" title="HTML DOM TableData ɗanar"><td></a></li> <li><a href="/ha/jsref/dom_obj_tfoot.html" title="HTML DOM TFoot ɗanar"><tfoot></a></li> <li><a href="/ha/jsref/dom_obj_tablehead.html" title="HTML DOM TableHeader ɗanar"><th></a></li> <li><a href="/ha/jsref/dom_obj_thead.html" title="HTML DOM THead ɗanar"><thead></a></li> <li><a href="/ha/jsref/dom_obj_tablerow.html" title="HTML DOM TableRow ɗanar"><tr></a></li> <li><a href="/ha/jsref/dom_obj_textarea.html" title="HTML DOM Textarea ɗanar"><textarea></a></li> <li><a href="/ha/jsref/dom_obj_time.html" title="HTML DOM Time ɗanar"><time></a></li> <li><a href="/ha/jsref/dom_obj_title.html" title="HTML DOM Title ɗanar"><title></a></li> <li><a href="/ha/jsref/dom_obj_track.html" title="HTML DOM Track ɗanar"><track></a></li> <li><a href="/ha/jsref/dom_obj_u.html" title="HTML DOM Underline ɗanar"><u></a></li> <li><a href="/ha/jsref/dom_obj_ul.html" title="HTML DOM Ul ɗanar"><ul></a></li> <li><a href="/ha/jsref/dom_obj_var.html" title="HTML DOM Variable ɗanar"><var></a></li> <li><a href="/ha/jsref/dom_obj_video.html" title="HTML DOM Video ɗanar"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/ha/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ɗanar">CSSStyleDeclaration</a></li> <li><a href="/ha/jsref/jsref_type_conversion.html" title="JavaScript ɗanar ƙirƙirar nau'war">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ha/howto/index.html" title="CodeW3C.com ɗanar Bawo">CodeW3C.com ɗanar Bawo</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Style animation 属性</h1> <div class="prenextnav-ref"> <ul> <li> 上一页 <a href="/ha/jsref/prop_style_alignself.html" title="Style alignSelf ɗanar ɗaukaki">alignSelf</a></li> <li> 下一页 <a href="/ha/jsref/prop_style_animationdelay.html" title="Style animationDelay ɗanar ɗaukaki">animationDelay</a></li> <li> 返回上一层 <a href="/ha/jsref/dom_obj_style.html" title="Object Style HTML DOM">Object Style HTML DOM</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>animation</code> 属性是六个动画属性的简写属性：</p> <ul> <li><a href="/ha/jsref/prop_style_animationname.html" title="Style animationName ɗanar ɗaukaki">animationName</a></li> <li><a href="/ha/jsref/prop_style_animationduration.html" title="Style animationDuration ɗanar ɗaukaki">animationDuration</a></li> <li><a href="/ha/jsref/prop_style_animationtimingfunction.html" title="Style animationTimingFunction ɗanar ɗaukaki">animationTimingFunction</a></li> <li><a href="/ha/jsref/prop_style_animationdelay.html" title="Style animationDelay ɗanar ɗaukaki">animationDelay</a></li> <li><a href="/ha/jsref/prop_style_animationiterationcount.html" title="Style animationIterationCount ɗanar ɗaukaki">animationIterationCount</a></li> <li><a href="/ha/jsref/prop_style_animationdirection.html" title="Style animationDirection ɗanar ɗaukaki">animationDirection</a></li> </ul> <p class="note"><span>Kwallin:</span>Duba kai tsaye k'annan <a href="/ha/jsref/prop_style_animationduration.html" title="Style animationDuration ɗanar ɗaukaki">Attribute animationDuration</a>ko da yau, waɗannan suna da wakiltar 0, kuma ba za a samu su ba.</p> </div> <div> <h2>Ammafi</h2> <p>Ayyuka da aya fada kuma <div> a cikin tasirin kira:</p> <pre class="language-js"> document.getElementById("myDIV").style.animation = "mynewmove 4s 2"; </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=jsck_style_animation">亲自试一试</a></p> </div> <div> <h2>语法</h2> <p>返回 animation 属性：</p> <pre><i>object</i>.style.animation</pre> <p>设置 animation 属性：</p> <pre><i>object</i>.style.animation = "<i>name</i> <i>duration</i> <i>timingFunction</i> <i>delay</i> <i>iterationCount</i> <i>direction</i> <i>fillMode</i> <i>playState</i>"</pre> <h3>属性值</h3> <table class="dataintable"> <tr> <th style="width: 25%;">值</th> <th>描述</th> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationname.html" title="Style animationName ɗanar ɗaukaki">animationName</a></i></td> <td>规定要绑定到选择器的关键帧的名称。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationduration.html" title="Style animationDuration ɗanar ɗaukaki">animationDuration</a></i></td> <td>规定动画需要多少秒或毫秒才能完成。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationtimingfunction.html" title="Style animationTimingFunction ɗanar ɗaukaki">animationTimingFunction</a></i></td> <td>规定动画的速度曲线。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationdelay.html" title="Style animationDelay ɗanar ɗaukaki">animationDelay</a></i></td> <td>规定动画开始之前的延迟。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationiterationcount.html" title="Style animationIterationCount ɗanar ɗaukaki">animationIterationCount</a></i></td> <td>规定动画应该播放多少次。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationdirection.html" title="Style animationDirection ɗanar ɗaukaki">animationDirection</a></i></td> <td>规定动画是否应在交替循环中反向播放。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationfillmode.html" title="Style animationFillMode ɗanar ɗaukaki">animationFillMode</a></i></td> <td>规定动画在执行时间之外应用的值。</td> </tr> <tr> <td><i><a href="/ha/jsref/prop_style_animationplaystate.html" title="Style animationPlayState ɗanar ɗaukaki">animationPlayState</a></i></td> <td>规定动画是正在运行还是暂停。</td> </tr> <tr> <td>initial</td> <td>将此属性设置为其默认值。请参阅 <a href="/ha/cssref/css_initial.html" title="CSS initial ɗanar ɗaukaki">initial</a>。</td> </tr> <tr> <td>inherit</td> <td>从其父元素继承此属性。请参阅 <a href="/ha/cssref/css_inherit.html" title="CSS inherit ɗanar ɗaukaki">inherit</a>。</td> </tr> </table> </div> <div> <h2>技术细节</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">默认值：</th> <td>none 0 ease 0 1 normal none running</td> </tr> <tr> <th>返回值：</th> <td>字符串，表示元素的 <a href="/ha/cssref/pr_animation.html" title="CSS animation ɗanar ɗaukaki">animation 属性</a>。</td> </tr> <tr> <th>CSS 版本：</th> <td>CSS3</td> </tr> </table> </div> <div> <h2>浏览器支持</h2> <p><code>animation</code> 是 CSS3 (1999) 特性。</p> <p>所有浏览器都完全支持它：</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> <th class="bsIE">IE</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> <td>IE</td> </tr> <tr> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>11</td> </tr> </table> </div> <div> <h2>相关页面</h2> <p>CSS 参考手册：<a href="/ha/cssref/pr_animation.html" title="CSS animation ɗanar ɗaukaki">animation 属性</a></p> </div> <div class="prenextnav-ref"> <ul> <li> 上一页 <a href="/ha/jsref/prop_style_alignself.html" title="Style alignSelf ɗanar ɗaukaki">alignSelf</a></li> <li> 下一页 <a href="/ha/jsref/prop_style_animationdelay.html" title="Style animationDelay ɗanar ɗaukaki">animationDelay</a></li> <li> 返回上一层 <a href="/ha/jsref/dom_obj_style.html" title="Object Style HTML DOM">Object Style HTML DOM</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/ha/jsref/index.html">Kita reference JavaScript da HTML DOM</a></h5> <h5 id="tools_example"><a href="/ha/js/js_examples.html">JavaScript 实例</a></h5> <h5 id="tools_quiz"><a href="/ha/js/js_quiz.html">JavaScript 测验</a></h5> <h5 id="tools_tutorial"><a href="/ha/js/index.html">JavaScript 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/ha/about/index.html" title="Babban ɗanar CodeW3C.com">Babban ɗanar CodeW3C.com</a> <a href="/ha/about/about_helping.html" title="Yarjejeniya ɗanar CodeW3C.com">Yarjejeniya ɗanar CodeW3C.com</a> <a href="/ha/about/about_use.html" title="Babban ɗanar amfani">Ƙauna ɗanar amfani</a> <a href="/ha/about/about_privacy.html" title="Babban ɗanar ƙirƙirar">Ƙauna ɗanar ƙirƙirar</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Ranticiya da Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>