登录 注册

Css3 之关键帧应用

本贴最后更新于 2927 天前，其中的信息可能已经渤澥桑田

要定义动画，你必须先从@keyframes规则。一个@keyframe规则包含关键字“@keyframes“，后面跟着一个标识符为动画（将使用引用给名字animation-name），然后是一组样式规则（由大括号分隔）。动画然后，通过使用标识符作为一个值施加到元件animation-name特性。例如：

/*定义动画*/
@keyframes your-animation-name {  
  /* 样式规则 */
}  
/* 把它应用到一个元素 */
.element {  
    animation-name: your-animation-name;    
   animation: your-animation-name 1s ...
}

大括号内，您可以定义关键帧，一个简单的动画@keyframe可能是这样的：

@keyframes change-bg-color {
  0% {       
   background-color: red;  
  }
 100%{      
  background-color: blue; 
 }
}

上述动画是类似于简单的过渡效果：背景颜色从一个值在动画（0％），直到它到达在动画（100％）的端部的另一个值的开头动画。当然还可以使用的选择器的关键字 

form和to代替使用0％和100％，因为它们是效果等价的。

@keyframes change-bg-color { 
 from {
    background-color: red; 
 }
 to { 
    background-color: blue; 
 }
}

关键帧规则：

桌面

  • 谷歌浏览器 - 4*

  • Mozilla Firefox浏览器 - 5*

  • IE浏览器 -  10

  • Opera浏览器  - 12*

  • Safari浏览器 4*

手机/平板电脑

  • iOS的Safari浏览器 3.2*

  • Android 浏览器 - 部分支持 2.1*

  • Opera 12.

  • 谷歌浏览器 54

  • Firefox浏览器 50

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

@keyframes change-bg-color
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes change-bg-color / Firefox /

{

from {background: red;}

to {background: yellow;}

}


@-webkit-keyframes change-bg-color / Safari 和 Chrome /

{

from {background: red;}

to {background: yellow;}

}


@-o-keyframes change-bg-color/ Opera /

{

from {background: red;}

to {background: yellow;}

}

CSS3 动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称

  • 规定动画的时长

把 "change-bg-color" 动画捆绑到 div 元素，时长：5 秒：

div

{

animation:  change-bg-color 5s;

-moz-animation: change-bg-color 5s;	/ Firefox /

-webkit-animation: change-bg-color 5s;	/ Safari 和 Chrome /

-o-animation: change-bg-color 5s;	/ Opera /

}

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

CSS3 动画属性 


属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。（infinite：无限次）3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
animation-fill-mode规定对象动画时间之外的状态。3
transform: 动画变形
transparent：透明色
transition：过度
translate：位移


定义一个 div，执行 360 度转圈，如下：

<body>

   <div class="box test"><img src="img/call.png"/></div>

</body>
/定义关键帧/

 @keyframes r{

   0%{transform: rotate(0deg);}

   100%{transform: rotate(360deg);}   

 }

 .box{width:120px;height:120px;background:red;

   text-align: center;

   line-height: 120px;

   color: #fff;

   border-radius: 50%;//设置圆形

   animation: r 2s infinite linear;//转圈

 }

 .box img{width:100%;height: 100%;border-radius: 50%;}

效果图：

定义关键帧移动动画：

<body>

   <div class="box a1  "><img src="img/call.png"/></div>

   <div class="box a2  "><img src="img/call.png"/></div>

   <div class="box a3  "><img src="img/call.png"/></div>

</body>

样式：

@keyframes move{

   0%{left:0}

   50%{left:500px}

   0%{left:0}

   50%{left:500px}

   100%{left:1000px;} 

}

.box{width:120px;height:120px;background:red;

   text-align: center;

   line-height: 120px;

   color: #fff;

   border-radius: 50%;

   position:relative;

} 

.a1{animation: move 3s ease infinite alternate;}

.a2{animation: move 3s ease infinite alternate 1s;}

.a3{animation: move 3s ease infinite alternate 2s;}


.box img{width:100%;height: 100%;border-radius: 50%;}

.box:hover{

   animation-play-state: paused;

}

效果如图：

利用关键帧做视频弹幕效果，先定义弹幕区域：

<input type="text" id="msg" value="请输入评论内容" style="width: 240px;height:35px;">

<button onclick="saveMessage(this)">追加评论</button>

<!--漂浮的位置-->

<div id="videobox"></div>

<button onclick="start(this)">开启弹幕</button>

定义样式及动画：

<style type="text/css">

   *{padding:0;margin:0;}

   a{text-decoration: none;color:#333;}

   body{font-family: "微软雅黑";font-size: 14px;}

   .items{display: inline-block;background:#333;padding: 10px 20px;color: #fff;border-radius:20px;

      position:absolute;

      top:50px;

      left:0px;

      animation: move 5s  linear infinite alternate both;

   }

   @keyframes move{

      from{left:-100px;}

      10%{background:rgba(0,0,0,0.4)}

      50%{background:rgba(0,0,0,0.12)}

      70%{background:rgba(0,0,0,0.1)}

      to{left:960px;background:rgba(0,0,0,0)}

   }

   #videobox{width:960px;height:460px;background:#333;margin:0 auto;position: relative;

      overflow: hidden;

   }

</style>
<script type="text/javascript">

   //次数组用来记录待会要元素如果到了尾部的元素把删除

   var arr = [];

   var vdom = document.getElementById("videobox");

   var iheight = 40;//高度

   var mt = 10;//间隙

   //飘窗的高度

   var vheight = vdom.offsetHeight;

   //漂浮的位置放的行数

   var rows = Math.floor(vheight / (iheight+mt));

   

   

   var danMuArr = [];

   var dtimer = null;

   //开启弹幕

   function  start(){

      //伪造弹幕列表

      for (var i = 0; i < 20; i++) {

         danMuArr.push("内容"+i);

      }

      clearInterval(dtimer);

      dtimer = setInterval(function(){

         playDanMu2();

      },17);

   };

   

   

   

   //追加评论

   function saveMessage(){

      //如果有新的内容加入，重新激活弹幕

      playDanmu3();

   };

   

   var index = 0;

   //播放弹幕，我想着要从弹幕列表中取 rows 条放入到

   function playDanmu3(){

      index++;

      var msg = document.getElementById("msg").value;

      //创建元素

      var divDom = document.createElement("div");

      //添加 class

      divDom.className = "items";

      //设定一点延时，延时目的，主要是让每个元素错开，因为不设定那么时间都一直，一起运动，可以注释看效果

      //加延时的目的：主要是产生时间差

      divDom.style.animationDelay = Math.random()+"s";

      //文本内容

      divDom.innerHTML= msg;

      //计算每个 div 小元素的 top 距离

      divDom.style.top = (iheight +mt)*(index%rows)+"px" ;

      //追加到飘窗中

      vdom.appendChild(divDom);

      //追加到数组

      arr.push(divDom);

   };

   

   

   function playDanMu2(){

      playDanmu();

   };


   

   //播放弹幕，我想着要从弹幕列表中取 rows 条放入到

   function playDanmu(){

      for(var i=0;i<danMuArr.length;i++){

         //创建元素

         var divDom = document.createElement("div");

         //添加 class

         divDom.className = "items";

         //设定一点延时，延时目的，主要是让每个元素错开，因为不设定那么时间都一直，一起运动，可以注释看效果

         //加延时的目的：主要是产生时间差

         divDom.style.animationDelay = Math.random()+"s";

         //文本内容

         divDom.innerHTML= danMuArr[i];

         //计算每个 div 小元素的 top 距离

         divDom.style.top = (iheight +mt)*(i%rows)+"px" ;

         //追加到飘窗中

         vdom.appendChild(divDom);

         //追加到数组

         arr.push(divDom);

         danMuArr.splice(i,1);

      }

   };

   var timer = setInterval(function(){

      for (var i = 0; i < arr.length; i++) {

         if(arr[i].offsetLeft+arr[i].offsetWidth+50 >= vdom.offsetWidth){//div.offsetWidth

            vdom.removeChild(arr[i]);

            arr.splice(i,1);

         }

      }

   },100);

</script>

效果图：

当点击开启弹幕时，会模拟 20 条数据加载在上面，点击追加评论时会将刚刚输入的内容显示在屏幕中。如图

 

是不时很简单呢。 

by 猿码阁

  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3454 回帖 • 189 关注
  • Web
    117 引用 • 433 回帖 • 8 关注
  • 关键帧
    1 引用
  • keyframes
    1 引用
北京 位置
635 3 33 154 122 68 46 199

相关帖子

回帖
Css3 之关键帧应用

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
idxiu
show me the code, change the world! 北京
回帖
15
 帖子
83
 积分
13880