【美高梅开户网址】落到实处的各样球体效果,变换和卡通片

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地图