CSS3动画相关的多少个特性是,  CSS3动画相关的几个属性是

一、前言兼目录索引

CSS3 Transitions, Transforms和Animation的使用,css3transitions

《天龙八部》里的虚竹小和尚往日可以算得和尚的先进人物与代表模范,种种清规戒律谨记与遵守。可是,后来啊,花姑娘送到邻近,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在就像有像样的感觉到,本来不打算追究CSS3的局地质量的,不过其作用以及实际使用价值之诱惑实在巨大,依旧抵挡不住,折腾下了那篇小说。劳民伤财的工程越少越好,所以,那里简直把CSS3
动画相关的多少个特性凑合到一同了,那样,至少一年半载内不会再写相关的作品了。

一、前言

  CSS3动画相关的多少个特性是:transition, transform,
animation;分别领会为过渡,变换,动画。虽意义相近,但具体的功用和在CSS3中负责的办事有自然的差距。

  transition指接入,就是从a点都b点,是有时光的,是一连的,一般针对常规CSS属性;transform指变换,包蕴多少个固定的性质:旋转、缩放、偏移等等,不过,效果就是很干燥机械的团团转运动,即便合营transition属性,变换就会很平整。animation开端使用于Safari浏览器,在法定的Introduction上介绍这几个特性是transition属性的恢弘。然则这一个不难的介绍其中包括了不不难的东西:keyframes。

 

CSS3动画相关的多少个特性是:transition,
transform,
animation;我分别理解为过渡,变换,动画。虽意义相近,但现实角色分化。似乎SHE组合,尽管都是八个女子,都唱同一首歌,但有负责高音,和善于低音的,具体做事于角色要么有距离的。//zxx:貌似那多少个哪个人何人烧伤了,真是不幸~~365体育官网 1

二、Transition

  CSS3
transition属性是一个概括的卡通片属性,可以说它是animation的简化版本,是给普通做不难网页特功能的,其功效是:平滑地改成CSS的值。无论是点击事件,主题事件,仍旧鼠标hover,只要值改变了,就是一马平川的,就是动画片。所以对于一个整站通用的class,可以很自在的渐进增强地落实动画效果,很有实用价值。

比如你有以下五个样式:

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

 

个中animate的transition的习性的情致说:当你的left属性暴发变化的时候,执行动画效果(仅仅根据left的属性变化,其余的品质不会加盟到动画变化之中去)。

  首先你的因素的css为position。当您将其cssList 增添 animate
或者替换position
为animate的时候,元素的属性变化,触发webkit-transition,以指定属性变化前的值为起先值,变化后的品质为终结值,执行动画效果。那是一个概括的两点变化进度,大大简化了animation属性的复杂程度。

  同时,要是在transition的动画当中,属性值有了新的变动,则会暂停当前的动画片执行,并将中止时的属性值提需要新的卡通作为初阶值来统计新的动画效果。

 

而transition有下边些实际性质:

transition-property :    *
//指定过渡的特性,比如transition-property:backgrond
就是指backgound参预这一个过渡
transition-duration:    *//指定那么些过渡的持续时间
transition-delay:    * //延迟过渡时间
transition-timing-function:    *//指定过渡类型,有ease | linear |
ease-in | ease-out | ease-in-out | cubic-bezier

譬如说下边这么些很简单的例子:

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

就跟CSS2的background属性一样,平常大家都不会像上边一样,把transition的特性一个一个摊开写,而是合并。

抑或地点的例证,大家将transition属性合并,并扩大多少个浏览器,如下CSS代码:

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

  transition中的transition-timing-function属性是充裕根本的,其一堆ease相关的值(linear
| ease-in | ease-out | ease-in-out | cubic-bezier),不太不难令人了然。

  首先cubic-bezier这一个大致就绝不管了,超过半数场地都用不到那么些事物(有想长远商量的校友自行钻研,我相对不会告诉你那是指贝塞尔曲线,与复杂的数学扯上了涉及……)。Linear即线性。至于剩下七个,就是指缓动效果,说白了就是指开头时候逐步动呢仍然得了的时候逐步动ease-in表示先慢后快;ease-out代表先快后慢;ease-in-out表示先慢后快再慢。

  (注意:不管哪天快曾几何时慢最终都是还要到达,完毕时间只与transition-delay属性有关)。

 

transition指对接啦,就是从a点都b点,如同过江坐渡轮,是有时光的,是一连的,一般针对常规CSS属性;transform指变换,就那些固定的性质:旋转啦,缩放啦,偏移啊什么的,与单身于远房亲戚transition使用,不过,效果就是很干燥机械的旋转运动。倘使合营transition属性,旋转啊什么的,就会很平整。animation初叶安家于Safari浏览器,自成一家,与transition和transform有老死不相往来之感,然则要说单挑的话,animation要比transition厉害些。

三、Transform

  transform指变换,使用过PS的人应当领悟里面的Ctrl+T自由转移。transform就是指的这么些东西,即拉伸、压缩、旋转、偏移等等。

  见上边示例代码:

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

  transform属性假如丰硕transition的对接特性,就是猛虎添翼。例如上边这么些事例,关键代码如下:

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

  结果在Chrome和
Safari浏览器下就有了祖玛里面青蛙挂掉时的缩放旋转效果了。

    在局地的test
case当中,每每演示transform属性的,看起来好像都是牵动画。那使得小片段直觉化思维的人(蕴涵自我)认为transform属性是卡通片属性。而相反,transform属性是静态属性,一旦写到style里面,将会直接显示效果,无其他变动进程。transform的主要用途是用来做元素的独特变形,对于做规划的人来说并不是很陌生,简单的来说就是css
的图样变形工具。

  关于图形变形的根基条件中等的原点设定,在css里面使用的是transform-origin来定义的。这一个定义的原点应该是该css效率的要素的左上角为0,0来测算的(有待研商)。其他的习性则基于这么些特性来测算举行总计。

  关于图形变化的形式,css3正规当中transform-style来定义。默许是flat,显示出来的是差不离的效能。而preserve-3d则将空间表现为3d格局。从正常的构思来说,应该只需求preserve-3d就好了,可是从谣传“开启了perserve-3d就动用了GPU加快”来说,那些特性可能是为着下跌系统消耗用的,毕竟3d比2d要多一个维度的统计。

  如果急需动用3d方式,必须先指定style为3d,并在任意父元素上加码 perspective 及perspective-origin 来指定透视点。

365体育官网,切实的给设计师改变元素样式用的品质则有以下四个:

  translate3d(x,y,z) 是用来决定元素的职位在页面上的三轴的地点的;

  rotate(deg)是用来控制元素旋转角度的;

  skew[x,y](deg) 那个特性是用来构建倾斜度的,做过设计的人或者会了然,那么些是用来在2d里边创造3d透视图的时候必须的属性;

  scale3d(x,y,z) 用来推广减少效果,属性是比值;

  matrix3d,css矩阵。通过这一个矩阵属性,涵盖了地点装有的属性值,然则个人觉得可读性极差(全都是数字和单位,背起来有些模糊),方今不曾理由推荐应用。

  总体看来 css transform的性质和原来选取的left ,right ,top, bottom
的特性从气象角度来说没有此外不同,由此接纳的时候理应将transform归类到那类定位变形的静态属性之中。

 

目录索引
1.
话说Transitions这厮

2.
话说Transforms这货

3.
话说Animation这物

4.
更实在综合的效益显示

5.
浏览器帮助景况

6.
参阅文章及延伸阅读

7.
尾声那东西

四、Animations

  做过Flash动画的人都会精晓,Flash里面有五个基础武器:时间轴和关键帧。而css
keyframes的面世,则是提供了flash世界中间的那五个特性的合集。看一个简约的
keyframes 的示范:

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
    left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

  下边那么些代码体现了一个keyframes
‘wobble’,其中 0% 代表在转变中分裂时间点的属性值,你可以较规范的主宰动画变化中此外一个时间点的质量效果。而animation则基于这些keyframes提供的性质变化方法去统计元素动画当中的特性。与
transition
不一致的是,keyframes提供越来越多的操纵,更加是光阴轴的支配,这一点让css
animation更坚实硬,使得flash的部分动画片效果能够由css直接决定完毕,而那总体,仅仅只须要几行代码,也由此诞生了汪洋(比起flash来说算是大方了)基于css的animation
tools,用来取代flash的卡通片部分。

  别的在animation属性里面还有一个最要紧的就是:animation-fill-mode,那几个特性标示是以(from/0%)指定的样式
仍旧以(to/100%)指定的体裁为动画片完毕之后的样式。那几个很便宜大家决定动画的末段样式,保险动画的完整连贯。

 

  看下边的代码示例:

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

  此例子中,鼠标悬停时动画只举办4次。

  效果几乎如下,默许是个矩形框:
365体育官网 2

  鼠标移上去后出示逐渐的增进率伸张,然后猛地急速的小幅扩充,同时背景色加深,下为动画进度中的截图:

 365体育官网 3

 

  animations不仅适用于CSS2中的属性,CSS3也是接济的,例如box-shadow盒阴影效果,所以,大家得以兑现外发光效果的。

 365体育官网 4

 

  发光效果如下:

365体育官网 5

CSS代码如下:

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

二、话说Transitions这厮

五、浏览器扶助情形

CSS Transitions

首次引入

Safari 3.2: 13/11/2008

Firefox 4.0: Late 2010

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

CSS 2D Transformations

首次引入

Safari 3.2: 13/11/2008

Firefox 3.5: 30/06/2009

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

Internet Explore 9: 09/2010

CSS Animations

第一次引入

Safari 4.0: 11/06/2008

Chrome 1.0: 02/09/2008

CSS 3D Transformations

第一次引入

Safari 4.0: 11/06/2008

Chrome: 28/08/2010

 

http://www.bkjia.com/Javascript/1168237.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1168237.htmlTechArticleCSS3 Transitions,
Transforms和Animation的利用,css3transitions 一、前言
CSS3动画相关的多少个特性是:transition, transform,
animation;分别了解为过渡,变换…

CSS3
transition属性早在上年自我的“CSS3
transition已毕超酷图片墙动画功效
”一文中就有过介绍。其效能是:平整的变动CSS的值。无论是点击事件,主旨事件,如故鼠标hover,只要值改变了,就是一马平川的,就是动画片。于是乎,只要一个整站通用的class,就足以很轻松的渐进增强地促成动画效果,超有实用价值的说。

transition有上面些实际性质:

style=”font-family: ‘courier new’, courier; color: #000000;”>transition-property
:* //指定过渡的特性,比如transition-property:backgrond
就是指backgound到场那一个过渡
style=”font-family: ‘courier new’, courier; color: #000000;”>transition-duration:*//指定那个过渡的持续时间
style=”font-family: ‘courier new’, courier; color: #000000;”>transition-delay:*
//延迟过渡时间
style=”font-family: ‘courier new’, courier; color: #000000;”>transition-timing-function:*//指定过渡类型,有ease
| linear | ease-in | ease-out | ease-in-out | cubic-bezier

比如说下边这一个很简短的例子:

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

结果在Safari或是Chrome浏览器下能够见见如下效果:
365体育官网 6

若是你正在利用或有webkit主题的浏览器,您或许狠狠地方击那里:webkit内核浏览器下背景观过渡demo

就跟CSS2的background属性一样,平常大家都不会像下边一样,把transition的性质一个一个摊开写,而是合并。

依然地点的例子,我们将transition属性合并,并增加多少个浏览器,如下CSS代码:

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

如下HTML代码:

<a href="/" class="trans">经过我~~</a>

结果如下截图(截自Opera
10.6浏览器):
365体育官网 7

transition中的transition-timing-function属性令人心存芥蒂,其一堆ease相关的值(linear
| ease-in | ease-out | ease-in-out |
cubic-bezier),不太不难让人领略与记住。尤其其中cubic-bezier就是指贝塞尔曲线,与复杂的数学扯上的关联,不禁勾起了高中时数学的恐怖的梦。

实则呢,理一理,也还好。首先cubic-bezier那么些差不离就不用鸟了,99%的意况都用不到那么些事物,所以,难得清闲,间接pass掉。linear很好记,线性嘛。至于ease-in
| ease-out |
ease-in-out,就是指缓动效果啊,说白了就是指起首时候逐渐动呢依旧终结的时候逐步动。那么in和out那个先逐步动呢?啊,大家可以联想回忆,很好记的。大家都知情OOXX吧,ease-in中的in就象征进入,进入的时候分爱他美(Dumex)发轫都是慢的,等瞄准就绪后才能便捷冲刺进入,于是ease-in代表先慢后快;ease-out其out表示出来,出来肯定是先快后慢的,因为出来时临近洞口速度自然要降下来,免得跑出来乱了旋律,于是ease-out代表先快后慢;最终,很好领悟的,ease-in-out表示一进一出,也就是先慢后快再慢。

稍微纯洁的人恐怕不太明白上边邪恶的文字表示的意义,没提到,大家可以看图说话,下边截自差异运动曲线下同一岁月的截图,从中可以看出哪些先快,哪个先慢(注意:最后都是同时到达):
365体育官网 8

万一你觉得下面的静态的截图表意不够具体,您可以狠狠地方击那里:今非昔比缓动类功效demo(Opera/Chrome/Safari)

您可以观测方块的运动规律,知道分歧缓动名称的功能是如何的。

以上就是transition的简短介绍,要翻看更详尽更高于的音信,能够去官方页面查看

三、话说transform这货

transform指变换,使用过photoshop的人应该驾驭里面的Ctrl+T自由转移。transform就是指的这一个事物,拉伸,压缩,旋转,偏移。见上边示例代码:

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

结果就有像样上边的些效果:
365体育官网 9

你可以狠狠地方击那里:transform些属性效果demo

transform属性即使丰盛transition的连接特性,那可就是如虎得翼,樱木花道配上流川枫啊,可以发生很多突出的火花,例如上面那一个事例,关键代码如下:

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

结果在Chrome推断Safari浏览器下就有了祖玛里面青蛙挂掉时的缩放旋转效果了:
365体育官网 10
鼠标经过时:
365体育官网 11

设若你手上有webkit要旨的浏览器,能够狠狠地方击那里:酷酷的缩放旋转动画demo

transform还扶助3D转换,怎一酷字了得。由于某些不可告人的因由,那里就不显得了。故,transform部分到此甘休。

四、话说animations这物

竣事二零一零年4月份,animations那物就像是依旧只在webkit主题的浏览器上起成效,所以本段落的一部分demo效果,需在webkit宗旨浏览器下查看,不在重复赘述。

animations的介绍以实例驱动。先看简单的缩放增加动画实例:
您可以狠狠地方击那里:animations水平弹性缩放变色动画

功能大约如下,默许是个很老实很平静的矩形框:
365体育官网 12

鼠标移上去后出示渐渐的宽窄扩充,然后猛地急迅的幅度伸张,同时背景观加深,下为动画进度中的截图:
365体育官网 13

主要的CSS代码如下:

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

此例子中,鼠标悬停时动画只举办4次。

animations不仅适用于CSS2中的属性,CSS3也是永葆的,例如box-shadow盒阴影效果,所以,大家落实外发光效果的。使用过web
qq的人应当有纪念,当鼠标移到聊天对象脑袋上的时候会有黑色外发光的动画,不过那是gif动画图片已毕的(现在机关跳转到web
qq 2.0已看不到效果)。gif动画落成的效率类似于上边(很般配):

365体育官网 14 摸左侧张含韵

不过gif的重用性有限而且制作破费功夫,假如简单几行CSS代码就足以兑现高质量高扩大的法力岂不越发,现在animations就可以搞定这一部分。

您可以狠狠地方击那里:animations下的外发光动画demo

发光效果如下:
365体育官网 15

要害的CSS代码如下:

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

animation体现甘休,的说~~

五、更实在综合的效应突显

首先,鼠标悬停的淡入淡出效果。

你可以狠狠地方击那里:鼠标悬停的淡入淡出demo

脚下,非webkit宗旨浏览器上面,鼠标悬停仅仅是透明与不透明,只有在webkit要旨浏览器下边才有平整的动画片效果,如下图:
365体育官网 16

连带紧要CSS代码如下:

.anim_fade_image {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.anim_fade_image:hover, .anim_fade_image_hover {
    opacity:0;
    filter: alpha(opacity=0);
}

当然,大家也能够辅助JavaScript,添加点击图片淡出淡出。JavaScript负责的只是终了的透明度值,中间的动画直接付出CSS就可以了。

你可以狠狠地方击那里:点击下的淡入淡出demo

效果类似,就不展现截图了,代码类似,就不呈现代码了。

理所当然,大家仍可以做些小动画,让图片自动淡入淡出的广播,不停地播报。要不停播放只要将animation-iteration-count设为infinite(无限)就ok的啦。于是,大家修改下CSS代码,如下:

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}

于是乎,图片就稀里糊涂的不停地淡入淡出了。您有趣味可以狠狠地方击那里:图形无限自动fade效果demo

上述些效果都是与透明度打交道的。上面这么些实例是与图片地点,比例尺寸挂钩的,聪明的您是否想开了transform属性呢。对的,transform+tranisition,双剑合璧,天下无敌。上面这些功用是很酷很酷的,在此此前大三只可以在Flash中可以看来。当当当当,您可以狠狠地点击那里:图表轮转缩放显示动画demo(鼠标经过图片有喜怒哀乐的说,非webkit绕道,搜狗等浏览器可切换到便捷方式可以)。

成效截图如下,为动画进程中:
365体育官网 17

连带的着力的CSS代码如下:

.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor:pointer;
}
.anim_image_top {
    position: absolute;
    -webkit-transform: scale(0, 0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: top right;        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
}

HTML代码如下:

<div id="testBox" class="anim_box">
    <img class="anim_image anim_image_top" data-src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" data-src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

本来,那里运用transform的团团转,水平垂直缩放效果也是很赞的,如下图所示:
365体育官网 18

您可以狠狠地方击那里:图表旋转切换动画demo

CSS代码与地方的例子开封小异,那里就不出示了,您可以去demo页面查看。

下边,体现的是进一步实际尤其可信的事例,选项卡切换
咱俩一直的选项卡切换基本上都是很生硬的,直接啪啪啪,切换过来了,没有点过渡啊什么的(毕竟写JavaScript动画开支较高),现在,有了transitions,完毕联网效果就是几行CSS代码的工作,不多说了,直接上实例。

您可以狠狠地点击那里:平整选项卡切换demo

在demo中,点击上面的多少个图片文字按钮状的东西,就足以看出图片水平滑过来,再滑过去,再滑过来,令人爱不释手啊。下图为截图:
365体育官网 19

CSS其作用的就是非凡值以all开端的transition属性,如下:

.trans_image_box {
    width: 2000px;
    height: 300px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

transitionCSS代码组很吃得开的。

如若是CSS值变换的,只若是外加有transition属性设置的,都是平整效果,都是卡通。所以,大家看看怎么样以卡通方式完结经典的手风琴切换效果。

您可以狠狠地方击那里:手风琴效果demo(点击水平题目有喜怒哀乐)

下为截图:
365体育官网 20

内部JavaScript扮演的角色只是变变高度值而已,动画,都是CSS一人为主完毕的,很赞吧。上面的代码就是动画片效果那段div上的CSS代码:

.acco_content {
    height:0;
    padding:0 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow:hidden;
}

JavaScript的效应只是是变变中度而已:

$$(".acco_title").click(function() {
    var rel = this.lang, cl = this.className, oOn = $$(".acco_title_on")[0], rel_on = oOn.lang;
    if (!/on/.test(cl) && rel && rel_on) {
        $$("#" + rel)[0].style.height = "140px";
        $$("#" + rel_on)[0].style.height = "0";
        this.className = "acco_title acco_title_on";
        oOn.className = "acco_title";
    }
});

相关文章