可以兑现硬件加快动画,你想不到的

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

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

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

翻译注:那篇小说比较古老了,大致成文于二〇一一年。放在当今急剧变化的web前端世界中犹如不怎么过时。不过究其所写的内容-CSS动画的规律,则万变不离其宗,通晓动画的基本原理极度紧要,里面涉及的12条基础动画原则,对创建高性能的卡通片效果有所极好的引导意义。当时协助CSS动画属性的浏览器很少,近来差不离拥有主流浏览器基本都援救了(别跟我提IE哦)。文章中的代码示例和大家今天写的CSS3动画基本是千篇一律,放在现在的浏览器跑也从未包容性难题。

现近日 Firefox 和
基于Webkit引擎的浏览器都帮衬CSS动画了,择日不如撞日,何不尝试一下。抛去技术形态,不管是价值观木偶剧、电脑3D动画、Flash或CSS,服从的动画片原理都是相通的。

我们将在篇章中起头摸底CSS动画,并按照指引原则创立CSS动画。然后将因此实例,使用传统木偶剧原理成立CSS动画。最后,体现一些实打实世界里的用例。

亚洲必赢官网 1

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

transitions(过渡)

亚洲必赢官网 2

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;
}

那段代码做了自然简化,并不曾把拥有属性值都写上。假诺某些值没有写,浏览器会回退使用默许值。

这几个是最基础的。上边我们将展现越多的代码。

7.1 CSS3的转移类型


注:transform的包容性如下

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

  被接纳于元素指定的品质变化时,该属性经过一段时间逐渐的连接到终极想要的值。

CSS 可以兑现无数您意外的法力,后天我们来尝试接纳 CSS
落成各类球体效果。有三种方法可以兑现,第一种是利用大批量的元素创造实际的
3D 球体,那种格局有私房的性质难点;其余一种是使用 CSS3
渐变和影子特性来落实,达成形式简便,效果不错。

动用传统木偶剧原理

在我看来,传统木偶剧的鼻祖迪斯尼,早期在有名的书籍《Illusion of
Life》里创造了价值观木偶剧的12条原则。这个基础条件得以利用到持有品类动画,然则你并不须要像动画片专家一致坚守。大家将那12条标准运用到CSS动画实例上,把一个基础动画转变成尤其可信赖的视觉幻象。

即便如此只是蹦蹦跳跳的小球,但您能够见到八个版本中的不相同世界。

其一例子浮现了CSS动画特性。上面的代码中,大家用一些空div元一向呈现如何运转;大家都晓得那代码不够语义化,但重点在于它将页面变得绘声绘色起来,那在从前的浏览器中是绝对做不到的。

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则是旋转角度。

  主要包蕴七个特性:

为有限支撑功效,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。

扼住和拉伸

亚洲必赢官网 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;
}

7.1.3 scale比例缩放

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

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

    1.transition-propery

我们先来贯彻一个中坚的圆,HTML 代码如下:

舞台

亚洲必赢官网 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 一贯维系匀速。

你还是能利用贝塞尔曲线来创设自定义的缓动速度。

翻开慢进慢出效果

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个可能值。

阴影和 3D

弧线

亚洲必赢官网 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); }
}

查看扶助动画

7.3.4 @keyframes小结

  • keyframes可以转移任意多的体制,任意多的次数;
  • 选拔百分比来规定变化发生的时光,或者用from, to;
  • 为了获取最佳的浏览器协理,应始终定义0%和100%接纳器

注:IE10、Firefox、opera支持@keyframes和animation属性;Chrome和Safari须要追加前缀-webkit-;IE9及前边不协助。

    4.transition-delay

此地运用了 CSS3 perspective 特性,效果如下:

定时

亚洲必赢官网 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;
        }

上边的效果已经很有立体感了,那里大家再转移一下光照效果,让球体看起来更像Snow克台球。

至于小编:段昕理

亚洲必赢官网 8

因为iPod而喜欢上苹果的一体系产品,非凡认同他们追求极致的精神。工作之余,喜欢前端的开源项目,Github(

个人主页 ·
我的稿子 ·
15 ·
   

亚洲必赢官网 9

    由于transition 最早是由webkit内核浏览器提议的,
为了匡助群众项指标浏览器须要加前缀
      //Mozilla内核    -moz-transition :
      //Webkit内核    -webkit-transition :
      //Opera      -o-transition :

成效如下:

Animation
    Keyframes 具有其和谐的语法规则 ,他的命名是由”@keyframes“
起首,后边跟着那一个动画的名号 加上一堆花括号。
    对于一个”@keyframes”中的样式规则是由三个百分比构成的,如“0%”到”100%”之间
    语法:
      @keyframes IDENT {
        from {
          Properties:Properties value;
        }
        Percentage {
          Properties:Properties value;
        }
        to {
          Properties:Properties value;
        }
      }

8 号球效果

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

俺们再给球体加上数字 8,那样就有了台球黑8 的机能了。

    其中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;
            }
        }

HTML 代码:

    元素调用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;/*概念动画格局*/
          }

CSS 代码:

    属性
      1.animation-name:

.ball .eight {

        语法: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将暂停的卡通片重新播放,
        大家那里的双回看放不必然是从元素动画的初叶播放,而是从你暂停的那多少个地点上马播报。

width: 110px;

 

height: 110px;

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

margin: 30%;

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

background: white;

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

border-radius: 50%;

    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等操作都是以元素协调焦点岗位进行转移的。

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

    面对差距浏览器的基础
    //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标准

position: absolute;

   如坐标地点暴发变化:
    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);
      }

}

    2.transform:translateX(x)

.ball .eight:before {

    .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);
    }

content: “8”;

    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);
    }

display: block;

   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);
    }

position: absolute;

  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);
    }

text-align: center;

  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);
    }

height: 80px;

  

width: 100px;

  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);
  }

left: 50px;

  8.transform:skew(x,y)

margin-left: -40px;

   .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);
    }

top: 44px;

  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);
    }

margin-top: -40px;

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

color: black;

  .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-family: Arial;

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

网站地图xml地图