重庆SEO前端技术博客

重庆SEO前端技术博客

当前位置: 主页 > CSS >

关于css动画 Animation了解

时间:2020-11-05 11:01来源:未知 作者:点击:
语法简写:animation: 名称(name)时间(duration)速度曲线(timing-function)动画开始之前的延迟(delay)播放的次数(iteration-count)是否应该轮流反向播放动画(direction) 定义和用法: animation-name规定需
语法简写:animation: 名称(name) 时间(duration) 速度曲线(timing-function) 动画开始之前的延迟(delay) 播放的次数(iteration-count) 是否应该轮流反向播放动画(direction) 
 
定义和用法:
  animation-name     规定需要绑定到选择器的 keyframe 名称
  animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  animation-timing-function规定动画的速度曲线。
  animation-delay    规定在动画开始之前的延迟。
  animation-iteration-count规定动画应该播放的次数。
       animation-direction规定是否应该轮流反向播放动画。
 
一、animation-name     规定需要绑定到选择器的 keyframe 名称
 
       语法:animation-name: keyframename|none;
 
值:
  keyframename规定需要绑定到选择器的 keyframe 的名称。
       none规定无动画效果(可用于覆盖来自级联的动画)。
 
二、animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  值:
       time;规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。
 
三、animation-timing-function规定动画的速度曲线。
  语法:animation-timing-function: value;
  值:
  linear动画从头到尾的速度是相同的。
  ease默认。动画以低速开始,然后加快,在结束前变慢。
  ease-in动画以低速开始。
  ease-out动画以低速结束。
  ease-in-out动画以低速开始和结束。
       cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
 
四、animation-delay 定义动画何时开始。
  语法:animation-delay: time;
  值:
  time可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。

五、animation-iteration-count 属性定义动画的播放次数。
  语法:animation-iteration-count: n|infinite;
       n定义动画播放次数的数值。
       infinite规定动画应该无限次播放。
 
六、animation-direction 属性定义是否应该轮流反向播放动画。
  语法:animation-direction: normal|alternate;
  值:
  normal默认值。动画应该正常播放。
       alternate动画应该轮流反向播放。
 
例子:
html{
    background: rgb(0, 0, 0);
}
.cc2{
    width: 12px;
    height: 12px;
    position:relative;
    background:rgb(253, 253, 253);
    animation:bian 2s infinite;              /*关键字bian 2秒时间  infinite方式*/
    -webkit-animation: biane 2s infinite;    /*兼容谷歌浏览器*/
}
 
@keyframes biane
{
    from {background:rgb(8, 8, 8)}
    to {background:rgb(252, 252, 252)}
    }
@-webkit-keyframes biane
{
    from {background:rgb(8, 8, 8)}
    to {background:rgb(252, 252, 252)}
    }
 
在上例子中是animation得简写,实际上我们也可以这样,效果是一样的
 
html{
    background: rgb(0, 0, 0);
}
.cc2{
    width: 12px;
    height: 12px;
    position:relative;
    background:rgb(253, 253, 253);
    animation-name: biane;                    /*关键帧名为biane与@keframes配合*/
    animation-duration: 2s;                  /*动画要2秒*/
    animation-timing-function:linear;       /*一样得速度*/
    animation-delay: 0s;                    /*马上播放*/
    animation-iteration-count: infinite;  /*无限循环*/
    animation-direction: normal;          /*动画正常播放*/
}
 
@keyframes biane
{
    from {background:rgb(8, 8, 8)}
    to {background:rgb(252, 252, 252)}
    }
@-webkit-keyframes biane
{
    from {background:rgb(8, 8, 8)}
    to {background:rgb(252, 252, 252)}
    } 

------分隔线----------------------------