规律与实例,达成的种种球体效果
分类:前端技术

CSS动画学习指南:原理与实例

2015/09/25 · CSS · 1 评论 · 动画

本文由 伯乐在线 - 段昕理 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:Tom Waterhouse。欢迎加入翻译组。

译者注:这篇文章比较古老了,大概成文于2011年。放在当今急速变化的web前端世界中似乎有些不合时宜。不过究其所写的内容-CSS动画的原理,则万变不离其宗,理解动画的基本原理非常重要,里面提到的12条基础动画原则,对创建高质量的动画效果有着极好的指导意义。当时支持CSS动画属性的浏览器很少,如今几乎所有主流浏览器基本都支持了(别跟我提IE哦)。文章中的代码示例和我们今天写的CSS3动画基本是一致,放在现在的浏览器跑也没有兼容性问题。

现如今 Firefox 和 基于Webkit引擎的浏览器都支持CSS动画了,择日不如撞日,何不尝试一下。抛去技术形态,不管是传统动画、电脑3D动画、Flash或CSS,遵循的动画原理都是相通的。

我们将在文章中初步了解CSS动画,并按照指导原则创建CSS动画。然后将通过实例,使用传统动画原理创建CSS动画。最后,展示一些真实世界里的用例。

图片 1

图片 2

CSS3中的变换属性:transform
CSS3中的渐变效果:transition

transitions(过渡)

CSS 动画属性

在深入之前,我们先写点基础的CSS:

Animation 是CSS的新属性,允许我们不需要借助Javascript或Flash就能为HTML元素(如:div、h1 和 span)创建动画。现在支持这个属性的浏览器有 包含Webkit 引擎的浏览器,如:Safari 4 、Safari for iOS (iOS 2 )、Chrome 1 和Firefox 5。 不支持该属性的浏览器则会忽略动画代码,此时要确保你的页面不完全依赖这个属性。

由于这个技术相对来说较新,需要添加浏览器厂商的前缀。到目前为止,每个浏览器的语法规则都是一样,只是用前缀区分。下面的代码例子中,我们用的是 -webkit 前缀语法。

要为元素添加动画,你只需要将CSS 动画关联到该元素就可以了:

CSS

/* This is the animation code. */ @-webkit-keyframes example { from { transform: scale(2.0); } to { transform: scale(1.0); } } /* This is the element that we apply the animation to. */ div { -webkit-animation-name: example; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; /* ease is the default */ -webkit-animation-delay: 1s; /* 0 is the default */ -webkit-animation-iteration-count: 2; /* 1 is the default */ -webkit-animation-direction: alternate; /* normal is the default */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* This is the animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}
 
/* This is the element that we apply the animation to. */
div {
   -webkit-animation-name: example;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 1s;             /* 0 is the default */
   -webkit-animation-iteration-count: 2;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}

首先,我们创建动画代码。这段代码可以出现在CSS文件中的任何位置,只要元素能找到相应动画的名字(animation-name)就可以了。

还有一种更简便的方法为元素添加动画:

CSS

div { -webkit-animation: example 1s ease 1s 2 alternate; }

1
2
3
div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

这段代码做了一定简化,并没有把所有属性值都写上。如果某些值没有写,浏览器会回退使用默认值。

这些是最基础的。下面我们将展示更多的代码。

CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现,实现方法简单,效果精美。

7.1 CSS3的变换类型


注:transform的兼容性如下

  • IE10、Firefox、Opera支持transform属性;
  • IE9支持替代的-ms-transform属性,仅适用于2D转换;
  • Safari和Chrome支持替代的-webkit-transform属性;
  • Opera只支持2D转换;

  被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。

使用传统动画原理

在我看来,传统动画的鼻祖迪斯尼,早期在著名的图书《Illusion of Life》里创立了传统动画的12条原则。这些基础原则可以应用到所有类型动画,不过你并不需要像动画专家一样遵循。我们将这12条原则运用到CSS动画实例上,把一个基础动画转变成更加可信的视觉幻象。

虽然只是蹦蹦跳跳的小球,但你可以看出两个版本中的不同世界。

这个例子展示了CSS动画特性。下面的代码中,我们用一些空div元素来展示如何运作;我们都知道这代码不够语义化,但重点在于它将页面变得生动起来,这在以前的浏览器中是绝对做不到的。

为保证效果,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。

7.1.1 rotate旋转变换

  1. 最简单的2D旋转
div{
    transfrom: rotate(7deg);
    -ms-transform: rotate(7deg);    /*IE9*/
    -moz-transform: rotate(7deg);   /*Firefox*/
    -webkit-transform: rotate(7deg);/*safari和Chrome*/
    -o-transform: rotate(7deg);     /*Opera*/
}

rotateX, rotateY, rotateZ: rotateZ相当于rotate
如果要在其他向量上旋转,可以使用rotate3d(x, y, z, deg),xyz的值建立三维向量,deg则是旋转角度。

  主要包括四个属性:

挤压和拉伸

图片 3

这个弹跳球为压扁和拉伸做了很好的展示。如果弹球高速下落并撞击地面,你可以观察到它被挤扁然后在弹回的过程中被拉伸。

在基本常识层面,这个例子让我们的动画有了重量和伸缩的感觉。如果扔一个保龄球,我们不会期待它有任何拉伸,很可能只是会撞坏地面。

可以通过CSS3的属性 transform 来产生压扁和拉伸的效果。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: scaleY(1.0); } 50% { -webkit-transform: scaleY(1.2); } 100% { -webkit-transform: scaleY(1.0); } }

1
2
3
4
5
@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

这段代码会将物体纵向(y轴,上下)的比例改变为原始比例的1.2倍,然后回复到原始尺寸。

我们还为这个动画使用了稍微复杂一点的定时器。对于基础动画只需要起始(from)和结束(to)就可以了。但你也可以通过白分比的方式为每个时间点设置动画,就像代码所展示的那样。

挤压效果已经实现了。现在我们利用转换(translate)来移动物体。我们可以它将形变放在一起。

CSS

50% { -webkit-transform: translateY(-300px) scaleY(1.2); }

1
2
3
50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

转换属性允许我们在不改变基础属性(如 位置、宽度、高度)的前提下操作物体,这就使其非常适合CSS动画。这个特别的转换属性让小球在动画的中间点从地面弹起。

(请注意:要查看这个动画,你需要最新版的Firefox、Chrome或Safari。笔者书写这段文字的时候,Safari浏览器提供了最佳视觉体验。)

(译者注:现如今主流的浏览器都已经能很好的实现动画效果了)

查看挤压和拉伸的效果.

没错,小球看起来还是很糙,不过这个小小的调整是让动画变得逼真的第一步。

基本形状

7.1.2 skew扭曲变换

div{
    transform: skew(20deg, 10deg);    /*在X轴方向偏转20°,Y轴方向偏转10°*/
}

注意:skew没有3D和skewZ选项

    执行变换的属性:transition-property
    变换延续的时间:transition-duration
    变换的速率变化:transition-timing-function
    变换延迟时间:transition-delay。

预备

预备在主要动作发生之前增加了悬念或力量感。举个例子,在你起跳之前腿部的弯曲有助于观察者预判你下一步会做什么。在我们的弹球例子中,事前增加一个简单的影子表示有东西将要从上面掉下。

查看预备效果.

我们添加了另一个 div 元素代表影子,这样我们可以单独的为其设置动画。

要在这里增加预期,我们需要让小球快速掉入场景中。通过适配各百分比的时间点来实现,小球在开始点和第一个动作之间没有移动。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: translateY(-300px) scaleY(1.2); } 35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */ 65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* Starts moving after 35% to this position */ 67% { -webkit-transform: translateY(10px) scaleY(0.8); } 85% { -webkit-transform: translateY(-100px) scaleY(1.2); } 100% { -webkit-transform: translateY(0px); } }

1
2
3
4
5
6
7
8
@-webkit-keyframes example {
   0% { -webkit-transform: translateY(-300px) scaleY(1.2); }
   35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */
   65% { -webkit-transform: translateY(0px) scaleY(1.2); }    /* Starts moving after 35% to this position */
   67% { -webkit-transform: translateY(10px) scaleY(0.8); }
   85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
   100% { -webkit-transform: translateY(0px); }
}

在动画的35%的时间点前,小球在场景中的位置没有发生变化,没有移动。然后在 35% 到 65%,小球忽然出现在舞台上,剩下的动画紧接着跟上。

也可以使用动画延迟(animation-delay)来实现预备:

CSS

div { -webkit-animation-delay: 1s; }

1
2
3
div {
-webkit-animation-delay: 1s;
}

我们先来实现一个基本的圆,HTML 代码如下:

7.1.3 scale比例缩放

div{
    transform: scale(1.1, 1.1);
}

注:可以使用scaleX, scaleY, scaleZ进行单一方向上的缩放。

    1.transition-propery

舞台

图片 4

现在试试把舞台添加到场景中,将动画放入环境中。回顾一下迪士尼的电影,如果去掉了奇妙的背景会变成什么样?这是魔法的半壁江山。

舞台也是吸引注意的关键元素。与剧院的舞台一样,光线总是照射到最重要的区域。舞台应该加入到视野中。除了弹球,我为弹球的降落添加了一个简单的背景。这样看客就知道舞台的中央会出现动画,场景也就可以从一片大白雪(白色区域)中脱颖而出了。

径向渐变

7.1.4 translate位移变换

div{
    transform: translate(100px, 20px);  /*在x方向移动100px,Y方向移动20px*/
}

注:可以使用translateX, translateY, translateZ进行单一方向上的位移。

      语法:transition-property:none| all |[<IDENT>] [','<IDEBT>]*
      transition-property 是用来指定当前元素中一个属性改变时执行transition
      效果,其主要有以下几个值:none(没有属性改变); all(所有属性改变)这个也是其默认值;indent(元素属性名)
      当其值为none时,transiton马上停止执行,当指定为all时,则元素产生任何属性变化时都将执行transition效果
      ident是可以指定元素的某个属性值,
        1.color:通过红,黄,蓝 和透明度组件变化 如:background-color,border-color,color,outline-color等css属性;
        2.length 真实的数字。如:word-spacing,width,vertical-align,top,right,bottom,left,padding,
        3.percentage:真实的数字,如:如:word-spacing,width,vertical-align,top,right,bottom,left,padding,
        4.integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性
        5.number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性。
        6.transform list
        7.rectangle:通过x,y,width 和height(转为数值) 变换,如crop
        8.visibility:离散步骤,在0 到1 数字范围之内,0 表示隐藏,1表示完全"显示",如visibility
        9.shadow:作用于color,x,y,和blur(模糊),如text-shadow
        10.gradient;通过每次停止时的位置和颜色进行变化。
        11.paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似
        12.space-separated list of above:如果列表有相同的项目数值,
        13.a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

逐帧 VS 状态到状态

在传统动画中,可以选择如何构成自己的动画。逐帧意味着需要画出序列的每一帧。状态到状态意味着创建序列的少数关键帧,然后填充中间的间隔。填充间隔在被称作渐变(“in-betweening”或“tweening”),这是制作Flash动画的术语。

在CSS动画中,我们通常使用第二种方式,状态到状态。就是说,我们将为动作添加关键帧,之后浏览器将会自动在这些关键帧直接做渐变平滑处理。当然,我们同样也能向逐帧技术学习。浏览器只提供有限的动画效果;有时候,你为达到某种的效果时,必须采用更困难的方式为多种动画做拼接。

上面实现了基本的圆形效果,这里增加径向渐变效果来实现更逼真的球体。

7.2 使用transition制作交互动画


用jquery实现动画效果:

$(element).animate({width: "200px"}, 3000);
//$().animate(params, time, callback)

CSS3中的transition属性可以平滑改变CSS属性值

.content{
    height: 100px;
    width: 100px;
    -webkit-transition: height 600ms;
    -moz-transition: height 600ms;
    -o-transition: height 600ms;
    transition: height 600ms;
}
.content:hover{
    height: 300px;
}

上例即为高度为100px的正方形在hover下0.6s内变为300px的动画。如果需要改变多个属性,可以使用逗号隔开:

.content{
    transition: height 2s, width 2s, background 2s;
}

transition还可以包含设置渐进动画的函数,可以选择的函数有6种。

  • ease: 匀速变慢
  • linear: 匀速
  • ease-in: 加速
  • ease-out: 减速
  • ease-in-out: 加速然后减速
  • cubic-bezier: 自定义时间曲线
transition: all 0.5s ease-in-out 1s;

四个参数依次表示:属性、过渡时间、过渡函数、延迟时间

    2.transition-duration:

惯性和重叠

和物理世界一样!惯性和重叠常用在人物的身体移动中,例如人物胳膊的摇摆或头发的下落。想象一个人顶着大肚腩快速的转身:他们的身体先转过来,然后肚腩迅速跟上。

对我们来说,这意味着当球掉落时需要使其符合物理定律。上面的例子中小球掉落很不自然,就跟没有受到重力的影响一样。我们希望小球掉落,然后弹起。不过得讲完下一原则才能实现。

代码如下:

7.3 使用@keyframes制作动画(关键帧)


        transition-duration : <time> [, <time>]*
        transition-duration 是用来指定元素,转换过程的持续时间 取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,
        包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

慢进慢出

这是与加速或减速有关。想象一个超速的汽车需要停下来。如果它瞬间就停下来,肯定没人信。我们知道汽车需要时间来减速,所以要先让汽车刹车并缓慢停止。

还有一个和重力相关的效果。想象儿童荡秋千。当他们达到最高点时会减速,当返回到最低点时又会加速。最快的速度出现在弧面的底部。然后上升到相反的方向,如此反复。

图片 5

回到我们的例子,调整进和出的速度可以让小球的运动(最终)更加可信。

当球撞击地面,碰撞会使起迅速弹回。当抵达最高点,它会减速。这样看起来小球像是真正的掉落。

在 CSS 中,我们可以控制 animation-timing-function 属性:

CSS

-webkit-animation-timing-function: ease-out;

1
-webkit-animation-timing-function: ease-out;

这些属性包含以下这些值:

  • ease-in 开始时缓慢,然后加速。
  • ease-out 开始时快速,然后减速直到停止。
  • ease-in-out 开始缓慢,一直加速到中段,然后减速直到停止。
  • linear 一直保持匀速。

你还可以使用贝塞尔曲线来创建自定义的缓动速度。

查看慢进慢出效果

阴影和 3D

7.3.1 @keyframes的基本语法

@keyframes spin{
    from{
        -webkit-transform: rotateY(0);
    }
    to{
        -webkiy-transform: rotateY(-360deg);
    }    /*from和to代表0%和100%*/
}

@keyframes spin{
    0% {
        -webkit-transform: rotateY(0);
    }
    50% {
        -webkit-transform: rotateY(-180deg);
    }
    100% {
        -webkit-transfor,: rotateY(-360deg);
    }
}

@keyframes必须配合元素中定义的animation属性,用于定义动画

animation: spin 8s infinite linear alternate;

spin: 动画名称
8s:动画执行一次所需要的时间
infinite: 动画执行的次数
linear: 动画的速度函数,跟transition的速度函数相同
alternate: 表示动画正向循环完毕后反向循环
如果想对动画的运行进行控制,可以给元素增加animation-play-state属性:

div{
    animation-play-state: paused;  /*paused为暂停*/
    animation-play-state: running; /*running为开启动画*/
}

可以通过js控制这个属性来完成。

    3.transition-timing-function: 的值允许你根据时间的推进去属性值的变换率有6个可能值。

弧线

图片 6

与遵循物理定律类似,弧线遵循的基本原则叫做“上升的东西必然落下”。弧线在思考物体运动轨迹时非常有用。

这个动画用 CSS 来实现稍微繁琐一点。我们想让小球上下运动的同时往边上移动。所以,我们让小球从左边平滑进入的同时保持弹跳动画。与其把所有的动作都放到一个动画中,不如做两个独立的动画更简单。在这个例子里,我们将小球用另一个 div 元素包裹,然后单独添加动画。

HTML

XHTML

<div class="ball-arc"> <div class="ball"></div> </div>

1
2
3
<div class="ball-arc">
<div class="ball"></div>
</div>

CSS

JavaScript

.ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1); } /* cubic-bezier here is to adjust the animation-timing speed. This example makes the ball take longer to slow down. */ /* 这的贝塞尔曲线用作调整动画的速度。 这个例子使小球的减速时间更长了*/ @-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px); } 100% { -webkit-transform: translateX(0px); } }

1
2
3
4
5
6
7
8
9
10
11
.ball-arc {
-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
}
   /* cubic-bezier here is to adjust the animation-timing speed.
   This example makes the ball take longer to slow down. */
   /* 这的贝塞尔曲线用作调整动画的速度。
   这个例子使小球的减速时间更长了*/
@-webkit-keyframes ball-x {
   0% { -webkit-transform: translateX(-275px); }
   100% { -webkit-transform: translateX(0px); }
}

这样,我们通过一个动画移动小球的侧方向(ball-x),另一个动画控制小球的弹跳(ball-y)。 这个方法唯一不好的地方在于,如果你想做的事情很复杂,最终会让你陷入一堆缺乏语义的代码堆砌之中。

查看弧线效果

上节已经有基本的球体效果出来了,为了增加立体效果,我们在球的底部加个阴影,这样立体感就更强了。

7.3.2 实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                animation: firstAni 5s infinite;
                -webkit-animation: firstAni 5s infinite ;
            }
            @keyframes firstAni{
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
            @-webkit-keyframes firstAni{  /*适用于safari和chrome*/
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

      1.ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线 (0.25, 0.1, 0.25, 1.0)
      2.linear(均速)linear 函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
      3.ease-in(加速),ease-in函数等同月贝塞尔曲线(0.42,0,1.0,1.0)
      4.ease-out(减速),ease-out函数等同于贝塞尔曲线(0,0,0.58.1,0)
      5.ease-in-out(加速然后减速),ease-in-out函数等同于贝塞尔曲线(0.42,-,0.58,1.0)
      6.cubic-bezier:(该值允许你去定义一个时间曲线),特定的cubic-bezier曲线

辅助动画

辅助动画是让动画显得更加真实的微妙之处。辅助动画致力于细节。打个比方,如果有一个留着长发的人行走,主动作是行走,辅助动作是头发的摆动,或者也可能是衣服的褶皱随风变化。

我们的例子和这个非常相似。为了增加小球的更多细节,我们制作小球纹理的辅助动画。这样就造成了小球是被扔进来的错觉。

这次不再为这个动画添加另一个div元素,我们添加一个 img 图像元素充当小球的纹理。

CSS

.ball img { -webkit-animation: spin 2.5s; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(-180deg); } 100% { -webkit-transform: rotate(360deg); } }

1
2
3
4
5
6
7
8
.ball img {
-webkit-animation: spin 2.5s;
}
 
@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(-180deg); }
   100% { -webkit-transform: rotate(360deg); }
}

查看辅助动画

这里用到了 CSS3 perspective 特性,效果如下:

7.3.4 @keyframes小结

  • keyframes可以改变任意多的样式,任意多的次数;
  • 使用百分比来规定变化发生的时间,或者用from, to;
  • 为了得到最佳的浏览器支持,应始终定义0%和100%选择器

注:IE10、Firefox、opera支持@keyframes和animation属性;Chrome和Safari需要增加前缀-webkit-;IE9及之前不支持。

    4.transition-delay

定时

图片 7

这条原则只针对动画定时。如果动画的定时控制得越好,就越接近真实世界。

小球的例子完美的阐释了这个观点。例子中的小球很轻,设定这个速度合适的。如果是一个保龄球,我们会希望它下落的速度更快。而如果动画比现在更慢,则看起来像是在太空中打网球。选择合适的时间点会让你的动画看起来更真实。

可以很方便地通过 animation-duration 来调整时长,也可以通过动画的百分比设置单独的时长。

多层阴影

7.4 实例


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wahaha{
                width: 100px;
                height: 100px;
                text-align: center;
                background: #CCCCCC;
                line-height: 100px;
                font-family: "microsoft yahei";
                font-size: 50px;
                animation: rotateYdir 3s infinite alternate;
                -webkit-animation: rotateYdir 3s 2 alternate;
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
                border-radius: 10px;
            }
            @keyframes rotateYdir{
                0%{transform: rotateY(0);}
                100%{transform: rotateY(-360deg);}
            }
            @-webkit-keyframes rotateYdir{
                0%{-webkit-transform: rotateY(0);}
                100%{-webkit-transform: rotateY(-360deg);}
            }
            .yunxing{
                animation-play-state: running;
                -webkit-animation-play-state: running;
            }
        </style>
    </head>
    <body>
        <div class="wahaha">6</div>
        <script>
            var div1=document.getElementsByClassName("wahaha");
            div1[0].onmouseover=function(){
                this.style.animationPlayState="running";
                this.style.webkitAnimationPlayState="running"
            }
        </script>
    </body>
</html>

      transition-delay : <time> [, <time>]*
      transition-delay是用来指定一个动画执行开始执行的时间,也就是说当改变元素属性值后多长时间执行transtion
      其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所
      有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

夸张

卡通片以夸张或难以置信的物理特性著称。一个卡通人物可以变形成任何形状然后在恢复正常。在很多应用场景中,通过夸张来突出,让动画富有活力。否则看起来会很平淡。

尽管如此,使用夸张效果时需要谨慎。迪士尼有一个符合现实原则的方法,但稍微推进了一步。想象一个角色朝墙里跑,它的身体会被压扁的特别夸张,用来强调碰撞的力量。

我们使用挤压和拉伸的夸张手法让小球对地面的撞击更加明显。我还为动画添加了更精致的摇晃。最后,我们在球的弹跳过程中拉伸小球来突出速度感。

就像之前添加动画的做法一样,我们再添加一个 div 元素,这个元素使小球撞击地面时同时产生摇晃。

CSS

@-webkit-keyframes wobble { 0%, 24%, 54%, 74%, 86%, 96%, 100% { -webkit-transform: scaleX(1.0); /* Make the ball a normal size at these points */ } 25%, 55%, 75% { -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px); /* Points hitting the floor: squash effect */ } 30%, 60%, 80% { -webkit-transform: scaleX(0.8) scaleY(1.2); /* Wobble inwards after hitting the floor */ } 75%, 87% { -webkit-transform: scaleX(1.2); /* Subtler squash for the last few bounces */ } 97% -webkit-transform: scaleX(1.1); /* Even subtler squash for last bounce */ } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@-webkit-keyframes wobble {
 
0%, 24%, 54%, 74%, 86%, 96%, 100% {
   -webkit-transform: scaleX(1.0);
/* Make the ball a normal size at these points */
}
 
25%, 55%, 75% {
   -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px);
/* Points hitting the floor: squash effect */
}
 
30%, 60%, 80% {
   -webkit-transform: scaleX(0.8) scaleY(1.2);
/* Wobble inwards after hitting the floor */
}
 
75%, 87% {
   -webkit-transform: scaleX(1.2);
/* Subtler squash for the last few bounces */
}
 
97% -webkit-transform: scaleX(1.1);
/* Even subtler squash for last bounce */
}
 
}

这段代码看起来比之前复杂了不少。这是简单的试错。在找到合适的效果钱需要反复尝试。

查看夸张效果

为了实现更逼真的球体效果,这里应用了多层阴影,呈现的效果如下:

7.6 小结


  • 元素的变换:应用transform属性可以对元素进行旋转rotate,扭曲skew,位移translate,缩放scale;
  • 元素样式改变的过渡效果,应用transition属性可以改变和添加过渡效果;几个速度函数:ease, ease-in, ease-out, ease-in-out, linear内置函数:transition: prop 0.5s linear 1s,prop是css属性名;
  • 使用@ketframes和animation属性设置动画循环。

    把几个transition 的声明串在一起,用逗号(”,“)隔开。

扎实绘图及角色魅力

能够教你就这么多了……至少在代码方面。最后这两条动画原则无法通过代码来体现。他们是你日后需要完善的技能,使你最终能制作真正迷人的动画。

当迪士尼开始制作白雪公主的动画时,他们的动画师被派回去重新学习写生和人体结构。这种对细节的关注在影片中可见一斑。这正好说明良好的动画需要扎实的绘画功底和声乐知识。

大多数的CSS动画和错综复杂的数字动画不大相同,但是基础原则是一致的。无论是透过正在打开的门显示内容,还是正在密封并发送一封“联系我们”的信封,动画都必须是可信的,不能像机器一样……除非你制作的就是机器动画。

每一个动画角色都有独特的魅力。就像迪士尼总给我们展示的,任何事物都可以有性格:一个茶壶、一棵树、甚至是勺子。但在CSS的世界里,需要考虑整体动画如何有助于设计,使整体的体验更令人满意。我们不想在此制作大眼怪的动画。

光照效果

      如:
        a {
            -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
            -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
            -o-transition: background 0.5s ease-in,color 0.3s ease-out;
            transition: background 0.5s ease-in,color 0.3s ease-out;
        }

奔跑吧动画!

CSS的动画特性非常棒。和每一个CSS新特性一样,一开始容易被过度使用和错误的使用。甚至有点会重蹈Flash复杂动画页面覆辙的危险。尽管我有信心Web社区应该不会这么做。

CSS动画能让网站变得有生机。也许我们的小球动画不够简洁,但它向我们展示一种利用CSS让页面上任何元素变鲜活的可能。

CSS动画还可以让页面上的元素更容易互动,让页面更有意思。结合JavaScript,甚至能成为制作游戏动画的另一条路。将上面的12条原则应用在你的动画中,能使你的网站更有信服力、更诱人、更有趣,从而带来更好的完整体验。

译者推荐:

如果你和我一样懒,想制作CSS动画又不想写复杂的CSS3代码,这有两个非常不错的CSS3开源动画库推荐给你,Animate.css和CSS3 ANIMATION CHEAT SHEET。另外译者也编写了一个CSS3动画制作库H5Show,让你轻松的创建时下流行的Html5演示动画。当然想制作出高水准的动画,理解文章中的12条动画原则非常重要。

2 赞 6 收藏 1 评论

上面的效果已经很有立体感了,这里我们再改变一下光照效果,让球体看起来更像斯诺克台球。

    transition一个速记法:transition: <property> <duration> <animation type> <delay>
      如:
        p {
            -webkit-transition: all .5s ease-in-out 1s;
            -o-transition: all .5s ease-in-out 1s;
            -moz-transition: all .5s ease-in-out 1s;
            transition: all .5s ease-in-out 1s;
        }

关于作者:段昕理

图片 8

因为iPod而喜欢上苹果的一系列产品,非常认同他们追求极致的精神。工作之余,喜欢前端的开源项目,Github( 个人主页 · 我的文章 · 15 ·    

图片 9

效果如下:

    由于transition 最早是由webkit内核浏览器提出的, 为了支持大众类型的浏览器需要加前缀
      //Mozilla内核    -moz-transition :
      //Webkit内核    -webkit-transition :
      //Opera      -o-transition :

8 号球效果

Animation
    Keyframes 具有其自己的语法规则 ,他的命名是由”@keyframes“ 开头,后面紧接着这个动画的名称 加上一堆花括号。
    对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间
    语法:
      @keyframes IDENT {
        from {
          Properties:Properties value;
        }
        Percentage {
          Properties:Properties value;
        }
        to {
          Properties:Properties value;
        }
      }

我们再给球体加上数字 8,这样就有了台球黑8 的效果了。

    或者全部写成百分比的形式:
      @keyframes IDENT {
          0% {
           Properties:Properties value;
        }
        Percentage {
          Properties:Properties value;
        }
        100% {
          Properties:Properties value;
        }
      }

HTML 代码:

    其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,
      @-webkit-keyframes 'wobble' {
          0% {
            margin-left: 100px;
            background: green;
          }
          40% {
            margin-left: 150px;
            background: orange;
          }
          60% {
            margin-left: 75px;
            background: blue;
          }
          100% {
            margin-left: 100px;
            background: red;
            }
        }

CSS 代码:

    元素调用animation属性
       如:
          .demo1 {
              width: 50px;
              height: 50px;
              margin-left: 100px;
              background: blue;
              -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
              -webkit-animation-duration: 10s;/*动画持续时间*/
              -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
              -webkit-animation-delay: 2s;/*动画延迟时间*/
              -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
              -webkit-animation-direction: alternate;/*定义动画方式*/
          }

.ball .eight {

    属性
      1.animation-name:

width: 110px;

        语法:animation-name: none | IDENT[,none | IDENT]*;
        animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,
        换句话说此处的IDENT要和Keyframes中的IDENT一致,
        如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这
        个属性跟前面所讲的transition一样,我们可以同时附
        几个animation给一个元素,我们只需要用逗号“,”隔开。
      2.animation-duratiuon
        语法:animation-duration: <time>[,<time>]*
        animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。
        这个属性跟transition中的transition-duration使用方法是一样的。
      3.animation-timing-function:
        animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。
        他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。
        具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。
      4.animation-delay
        语法:animation-delay: <time>[,<time>]*
        animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。
        这个属性和transition-delayy使用方法是一样的。
      5.animation-iteration-count
        animation-iteration-count:infinite | <number> [, infinite | <number>]*
        animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。
      6.animation-direction
        语法: animation-direction: normal | alternate [, normal | alternate]*
        animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,
        动画的每次循环都是向前播放;
        另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
      7.animation-play-state
        语法:animation-play-state:running | paused [, running | paused]*
        animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。
        他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,
        我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。

height: 110px;

 

margin: 30%;

Transform
    字母上就是变形,改变的意思,在css3中transform主要包括一下几种,旋转rotate,扭曲skew,缩放scale和移动translate
    以及矩阵变形matrix
    语法:transform : none | <transform-function> [ <transform-function> ]*
    也就是:

background: white;

        transform: rotate | scale | skew | translate |matrix;

border-radius: 50%;

        none表示不进怎么变换;<transform=function>表示一个或者多个变换函数,以空格分开;
        换句话说就是我们同时对一个元素进行transform的多种操作,例如
        rotate,scale,translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,
        但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

-webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

    1.旋转rotate
      通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
      transform-origin定义的是旋转的基点,其中angle是指旋转角度,
      如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):
    2.移动translate
      移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
      translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
    3.缩放scale
      缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放
      (也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);
      scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,
      缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
    4.扭曲skew
      扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
      skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
    5.矩阵matrix
      matrix(<number>, <number>, <number>, <number>, <number>, <number>) 以一个含六值的(a,b,c,d,e,f)
      变换矩阵的形式指定一个2D变换,
      相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,
    6.改变元素的基点 transform-origin
      他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置,
      换句话说我们没有使用transform-origin改变元素基点位置的情况下,
      transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

position: absolute;

    面对不同浏览器的内核
    //Mozilla内核浏览器:firefox3.5
        -moz-transform-origin: x y;
    //Webkit内核浏览器:Safari and Chrome
      -webkit-transform-origin: x y;
    //Opera
      -o-transform-origin: x y ;
    //IE9
      -ms-transform-origin: x y;
    //W3C标准

}

   如坐标位置发生变化:
    1.transform:translate(x,y):
      .menu ul li.translate a:hover {
        -moz-transform: translate(-10px,-10px);
        -webkit-transform: translate(-10px,-10px);
        -o-transform: translate(-10px,-10px);
        -ms-transform: translate(-10px, -10px);
        transform: translate(-10px,-10px);
      }

.ball .eight:before {

    2.transform:translateX(x)

content: "8";

    .menu ul li.translate-x a:hover {
      -moz-transform: translateX(-10px);
      -webkit-transform: translateX(-10px);
      -o-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }

display: block;

    3.transform:translateY(y)
    .menu ul li.translate-y a:hover {
      -moz-transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      -o-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }

position: absolute;

   4.transform:rotate(角度值)
    .menu ul li.rotate a:hover {
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

text-align: center;

  5.transform:scale(x,y)
    .menu ul li.scale a:hover {
      -moz-transform: scale(0.8,0.8);
      -webkit-transform: scale(0.8,0.8);
      -o-transform: scale(0.8,0.8);
      -ms-transform: scale(0.8,0.8);
      transform: scale(0.8,0.8);
    }

height: 80px;

  6.transform:scaleX(x)
   .menu ul li.scale-x a:hover {
      -moz-transform: scaleX(0.8);
      -webkit-transform: scaleX(0.8);
      -o-transform: scaleX(0.8);
      -ms-transform: scaleX(0.8);
      transform: scaleX(0.8);
    }

width: 100px;

  

left: 50px;

  7.transform:scaleY(y)
  .menu ul li.scale-y a:hover {
      -moz-transform: scaleY(1.2);
      -webkit-transform: scaleY(1.2);
      -o-transform: scaleY(1.2);
      -ms-transform: scaleY(1.2);
      transform: scaleY(1.2);
  }

margin-left: -40px;

  8.transform:skew(x,y)

top: 44px;

   .menu ul li.skew a:hover {
      -moz-transform: skew(45deg,15deg);
      -webkit-transform: skew(45deg,15deg);
      -o-transform: skew(45deg,15deg);
      -ms-transform: skew(45deg,15deg);
      transform: skew(45deg,15deg);
    }

margin-top: -40px;

  9.transform:skewX(x)
   .menu ul li.skew-x a:hover {
      -moz-transform: skewX(-30deg);
      -webkit-transform: skewX(-30deg);
      -o-transform: skewX(-30deg);
      -ms-transform: skewX(-30deg);
      transform: skewX(-30deg);
    }
  10.transform:skewY(y)
   .menu ul li.skew-y a:hover {
      -moz-transform: skewY(30deg);
      -webkit-transform: skewY(30deg);
      -o-transform: skewY(30deg);
      -ms-transform: skewY(30deg);
      transform: skewY(30deg);
    }

color: black;

  11.transform:matrix(a,b,c,d,e,f)

font-family: Arial;

  .menu ul li.matrix a:hover {
    -moz-transform: matrix(1,1,-1,0,0,0);
    -webkit-transform: matrix(1,1,-1,0,0,0);
    -o-transform: matrix(1,1,-1,0,0,0);
    -ms-transform: matrix(1,1,-1,0,0,0);
    transform: matrix(1,1,-1,0,0,0);
  }

font-size: 90px;

line-height: 104px;

眼球效果

上面的效果怎么样?相信你已经很惊讶了。不过,CSS 能坐的远不止这些,这里我们再来实现一个眼球效果。

HTML 代码如下:

核心 CSS 代码如下:

.iris {

width: 40%;

height: 40%;

margin: 30%;

border-radius: 50%;

background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);

-webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

position: absolute;

-webkit-animation: move-eye-skew 5s ease-out infinite;

}

.iris:before {

content: "";

display: block;

position: absolute;

width: 37.5%;

height: 37.5%;

border-radius: 50%;

top: 31.25%;

left: 31.25%;

background: black;

}

.iris:after {

content: "";

display: block;

position: absolute;

width: 31.25%;

height: 31.25%;

border-radius: 50%;

top: 18.75%;

left: 18.75%;

background: rgba(255, 255, 255, 0.2);

}

会动的眼球

上节实现了眼球效果,这里我们一些关键帧来让眼球动起来,核心 CSS 代码如下:

@-webkit-keyframes move-eye-skew {

0% {

-webkit-transform: none;

}

20% {

-webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);

}

25%, 44% {

-webkit-transform: none;

}

50%, 60% {

-webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);

}

66%, 100% {

-webkit-transform: none;

}

}

这样,眼球就动起来了,很传神吧?!

图片 10

本文由pc28.am发布于前端技术,转载请注明出处:规律与实例,达成的种种球体效果

上一篇:绘制你需要的几何图形,CSS中的背景和边框 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • Canvas完毕监察和控制种类页面呈现,json工控风机
    Canvas完毕监察和控制种类页面呈现,json工控风机
    传说 HTML5 Canvas 达成客车站监察和控制 2017/11/21 · HTML5 ·Canvas 初稿出处: hightopo    陪伴国内经济的长足发展,大家对安全的渴求更为高。为了防卫下列景
  • 不足挂齿的,层叠上下文
    不足挂齿的,层叠上下文
    深入领会CSS中的层叠上下文和层叠顺序 2016/01/10 · CSS ·层叠上下文 原稿出处:张鑫旭    零、凡间的道理都以想通的 在此个世界上,所有的事都有个前后
  • 那或许是史上最全的CSS自适应布局总计,html清除
    那或许是史上最全的CSS自适应布局总计,html清除
    那或许是史上最全的CSS自适应布局计算 2016/05/11 · CSS ·自适应布局 原来的文章出处: 茄果    题目严谨坚守了新广告法,你再不爽,小编也没不合规呀!
  • 网页内文字如何拉长和压扁
    网页内文字如何拉长和压扁
    一、IE和Chrome等浏览器与zoom 还在几年前, zoom 还只是IE浏览器自身个人的玩意儿,不过,以后,除了FireFox浏览器,其余,非常Chrome和平运动动端浏览器已经
  • 资源大全,开发资源
    资源大全,开发资源
    CSS 资源大全 2015/12/25 · CSS · 1评论 ·CSS 本文由 伯乐在线 -iLeo翻译,艾凌风校稿。未经许可,禁止转载! 英文出处:github.com。欢迎加入翻译组。 sotayamash