css3中關(guān)鍵幀指的是什么意思

發(fā)布時(shí)間：2021-12-16 14:36:37 來源：億速云閱讀：156 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css3中關(guān)鍵幀指的是什么意思，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css中關(guān)鍵幀是決定animation動(dòng)畫變化的關(guān)鍵位置，是通過“Keyframes”來定義的，是css創(chuàng)建動(dòng)畫的一種規(guī)則；語法為“@keyframes 動(dòng)畫名{keyframes-selector{css-styles;}}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，關(guān)鍵幀可以指定任何順序排列來決定Animation動(dòng)畫變化的關(guān)鍵位置，是通過“Keyframes”來定義的。

使用@Keyframes規(guī)則創(chuàng)建動(dòng)畫，通過逐漸改變從一個(gè)css樣式設(shè)定到另一個(gè)。在動(dòng)畫過程中可以通過@Keyframes規(guī)則多次更改css樣式的設(shè)定。

通過 @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

語法如下：

@keyframes animationname {keyframes-selector {css-styles;}}

屬性值如下：

css3中關(guān)鍵幀指的是什么意思

示例如下：

<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>

輸出結(jié)果：

css3中關(guān)鍵幀指的是什么意思

關(guān)于“css3中關(guān)鍵幀指的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

css3中關(guān)鍵幀指的是什么意思

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽