旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

@keyframes是什么【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:109


导读:@keyframes是CSS的一种划定规矩,可以用来定义CSS动画的一个周期的行动,建立简朴的动画。css@keyframes作用:经由过程@keyframes...
@keyframes是CSS的一种划定规矩,可以用来定义CSS动画的一个周期的行动,建立简朴的动画。

css @keyframes

作用:经由过程 @keyframes 划定规矩,您可以建立动画。

申明:

建立动画的道理是,将一套 CSS 款式逐步变化为另一套款式。在动画过程当中,您可以屡次转变这套 CSS 款式。以百分比来划定转变发作的时候,或许经由过程关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的最先时候,100% 动画的完毕时候。为了取得最好的浏览器支撑,您应当一直定义 0% 和 100% 选择器。

解释:请运用动画属性来掌握动画的表面,同时将动画与选择器绑定。

css @keyframes的运用示例

<!DOCTYPE html>
<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
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>

<p><b>解释:</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

效果图:

以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人可以关注ki4网相干教程栏目!!!

以上就是@keyframes是什么的细致内容,更多请关注ki4网别的相干文章!

标签:@keyframescss