当前位置:Gxlcms > html代码 > cssAnimation初体验_html/css_WEB-ITnose

cssAnimation初体验_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

目前有越来越多的网站都使用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;

    人气教程排行