> 웹 프론트엔드 > HTML 튜토리얼 > css Animation初体验_html/css_WEB-ITnose

css Animation初体验_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:45:47
원래의
1189명이 탐색했습니다.

目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示。适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层。

在本教程中我会向你介绍CSS动画;随着浏览器支持性的提高已经变得越来越流行了,css动画在做一些事情上有很高的性能。在涵盖了基础知识后,我们将建一个快速的例子:矩形变成圆形的动画。

演示看这里

 

@keyframes和动画 介绍

css动画的主要组件:@keyframes,创建动画的css规则。把@keyframes想象为动画步骤的时间轴。在@keyframes里,你可以定义这些步骤,每个都有不同的样式声明。

第二步,让css动画能运行,需要为@keyframes绑定一个选择符。基于这些步骤,@keyframes声明的所有代码都会变解析然后对新的样式进行初始化。

 

The @keyframes

这里我们将会设置动画的步骤,@keyframes的属性如下:

  • 选择符的名字(这个例子中是tutsFade) .
  • 步骤:0%-100%;  from (equal to 0%) and to (equal to 100%).
  • CSS 样式: 每个阶段要应用到的样式.
  • 例子:

    @keyframes tutsFade {

       0% {

         opacity: 1 ;

       }

       100% {

         opacity: 0 ;

       }

    }

    或者:

    @keyframes tutsFade {

       from {

         opacity: 1 ;

       }

       to {

         opacity: 0 ;

       }

    }

    简写:

    @keyframes tutsFade {

       to {

         opacity: 0 ;

       }

    }

     

    上面的代码为元素应用一个不透明度的过渡,从opacity: 1到opacity: 0.上面三种方法实现的效果是一样的。

     

    The Animation

    animation的属性:

  • animation-name: @keyframes名称 (此例为 tutsFade).
  • animation-duration:时间间隔,动画从开始到结束的总长.
  • animation-timing-function: 设置动画速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay:动画开始前的延迟.
  • animation-iteration-count: 在动画期间它会遍历多少次.
  • animation-direction: 改变循环的方向,从开始到结束,还是从结束到开始,或者两者都.
  • animation-fill-mode: 指定动画结束时元素应用的样式 ( none | forwards | backwards | both ).
  • 例如:

    .element {

       animation-name: tutsFade;

       animation-duration: 4 s;

       animation-delay: 1 s;

       animation-iteration-count: infinite;

       animation-timing-function: linear;

       animation- direction : alternate;

    }

    简写为:

    .element {

       animation: tutsFade 4 s 1 s infinite linear alternate;

    }

    上面的代码会创建一个闪烁效果,1秒的动画延迟,4秒的动画间隔,交替的方向和无限线性循环迭代.

    增加浏览器前缀:

    在工作中,我们需要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用:

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-
  • 动画属性使用了浏览器前缀的形式:

    .element {

         -webkit-animation: tutsFade 4 s 1 s infinite linear alternate;

         -moz-animation: tutsFade 4 s 1 s infinite linear alternate;

         -ms-animation: tutsFade 4 s 1 s infinite linear alternate;

         -o-animation: tutsFade 4 s 1 s infinite linear alternate;

         animation: tutsFade 4 s 1 s infinite linear alternate;

    }

    @keyframes的前缀使用:

    @-webkit-keyframes tutsFade { /* your style */ }

    @-moz-keyframes tutsFade { /* your style */ }

    @-ms-keyframes tutsFade { /* your style */ }

    @-o-keyframes tutsFade { /* your style */ }

    @keyframes tutsFade { /* your style */ }

     

    更多浏览器前缀: http://css3please.com/

     

    多动画

    使用逗号分割添加多动画。为tutsFade 元素添加回转,我们要声明一个额外的@keyframes然后绑定到元素上:

    .element {

       animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;

    }

    @keyframes tutsFade {

       to {

         opacity: 0 ;

       }

    }

    @keyframes tutsRotate {

       to {

         transform: rotate( 180 deg);

       }

    }

     

    ------------------------------------分割线--------------------------------------------------------------------

    矩形变圆形实例

    这个例子中总共有五个步骤,每个步骤将为元素定义一个圆角,一个回转和不同的背景色,下面是实现的步骤和代码。

    基本元素

    首先创建一个标记,动画的元素。甚至不用class,仅仅只用一个div:

    然后运用元素选择为div添加样式:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

    }

    声明Keyframes

    定义一个 @keyframes,命名为square-to-circle,五个步骤如下:

    @keyframes square-to-circle {

       0% {}

       25% {}

       50% {}

       75% {}

       100% {}

    }

    需要为每个步骤定义一些样式,开始为每个矩形角定义圆角:

    @-webkit-keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

       }

       25%  {

         border-radius: 50% 0 0 0 ;

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

       }

       100% {

         border-radius: 50% ;

       }

    }

    然后为每个步骤定义不同的背景色:

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

       }

    }

    旋转DIV添加一点视觉效果:

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

         transform:rotate( 0 deg);

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

         transform:rotate( 45 deg);

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

         transform:rotate( 90 deg);

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

         transform:rotate( 135 deg);

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

         transform:rotate( 180 deg);

       }

    }

    应用动画

    定义了square-to-circle动画后,需要将它应用到div上:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s 1 s infinite alternate; 

    }

    上面使用了简写的动画属性,它们的状态是:

  • 动画名:square-to-circle.
  • 动画间隔:2s.
  • 动画延迟:1s.
  • 动画循环次数是无限的.
  • 动画运行方向是交替的, 首先从开始到结束,然后返回到最开始,然后到结束,循环往复。
  • 使用Timing-Function

    可以为animation添加的最后一个属性是animation-timing-function.定义移动的速度,加速或者减速。这个函数可以是一个非常详细的值,尴尬的手动计算,但是有很多免费的网站为timing-function提供资源和在线定制。

    例如:CSS Easing Animation Tool,现在来计算我们的定时功能。

    运用立方贝塞尔函数为square-to-circle动画添加伸缩效果。

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s 1 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate; 

    }

    最终的没有使用浏览器前缀(  -webkit- ,  -moz-,  -ms-,  -o- ) 的代码如下:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s . 5 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate;

    }

     

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

         transform:rotate( 0 deg);

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

         transform:rotate( 45 deg);

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

         transform:rotate( 90 deg);

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

         transform:rotate( 135 deg);

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

         transform:rotate( 180 deg);

       }

    }

     

    最后的事情

    在现代浏览器中一切运行正常,但是在Firefox中渲染对象有点不足,边缘会出现锯齿:

    幸运的是,有一个解决方法。在div上添加透明的outline之后Firefox就会完美地渲染!

    outline: 1px solid transparent;

     

     

     

     

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿