精华内容
下载资源
问答
  • 今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不好);chrome和safafi建议加上前缀-webkit-以向前兼容老版本 CSS3动画相关的几个属性...

    CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不好);chrome和safafi建议加上前缀-webkit-以向前兼容老版本

    CSS3动画相关的几个属性是:transition/transform/animation,我分别理解为过渡/变换/动画;虽意义相近,但具体角色不一

    transition指过渡,就是从a点都b点,就像过江坐渡轮,是有时间的/连续的,一般针对常规CSS属性;transform指变换,就那几个固定的属性,例如:旋转/缩放/偏移等,可独立于transition使用;但效果就是很干涩机械的旋转移动,要是配合transition属性就会很平滑;animation最先安家于Safari浏览器,与transition和transform有老死不相往来之感,但是要说单挑的话,个人认为animation要比transition厉害些

    transition

    CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻;W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡,这种效果可以在鼠标单击/获得焦点/被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值";下面我们从其语法和属性值开始一步一步来学习transition的具体使用

    在CSS中创建简单的过渡效果可以从以下几个步骤来实现:

    1.在默认样式中声明元素的初始状态样式

    2.声明过渡元素最终状态样式,比如悬浮状态

    3.在默认样式中通过添加过渡函数添加一些不同的样式

    语法:

    transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]

    transition主要包含四个属性值:

    transition-property:指定过渡或动态模拟的CSS属性;transition-duration:指定完成过渡所需的时间;transition-timing-function:指定过渡函数;transition-delay:指定过渡开始出现的延迟时间;这四个属性中只有是必需值且不能为0

    transition-property

    transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果

    语法:

    transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]

    transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变),all(所有属性改变)这个也是其默认值,indent(元素属性名);当其值为none时transition马上停止执行,当指定为all时则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值;其对应的属性如下:

    | background-color | background-position | border-bottom/left/top/right-color | border-bottom/left/top/right-width | border-spacing | bottom/left/top/right | clip | color | font-size | font-weight | height | letter-spacing | line-height | margin-bottom/left/top/right | max/min-height/width | opacity | outline-color | outline-width | padding-bottom/left/top/right | text-indent | text-shadow | vertical-align | visibility | width | word-spacing | z-index |

    用一个简单的例子来说明all:

    假设初始状态设置了样式width/height/background,当你在终始状态都改变了这三个属性,那么all代表的就是width/height/background,如果你的终始状态只改变了width/height,那么all代表的就是width/height

    transition-duration

    语法:

    transition-duration : <time> [, <time>]

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

    transition-timing-function

    transition-timing-function属性指的是过渡的"缓动函数",主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

    取值

    过渡时间函数共三种取值,分别是关键字/steps函数/bezier函数

    steps函数

    steps步进函数将过渡时间划分成大小相等的时间时隔来运行

    steps(<integer>[,start | end]?)

    :用来指定间隔个数(该值只能是正整数)

    第二个参数:该参数可选,默认是end,表示开始值保持一次;若参数为start,表示开始不保持

    语法:

     transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)[,ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)]

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

    属性名 属性值
    ease 默认值,元素样式从初始状态过渡到终止状态速度由快到慢,逐渐变慢
    linear 元素样式从初始状态过渡到终止状态速度是恒速
    ease-in 元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态;常称这种效果为渐显效果
    ease-out 元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态;常称这种效果为渐隐效果
    ease-in-out 元素样式从初始状态过渡到终止状态时,先加速再减速;常称这种效果为渐显渐隐效果
    cubic-bezier 该值允许你去自定义一个时间曲线,特定的cubic-bezier曲线;(x1,y1,x2,y2)四个值特定于曲线上点P1和点P2,所有值需在[0,1]区域内,否则无效

    举例:

    <style>
    .test{
        height: 100px; width: 100px; background-color: pink; transition-duration: 3s;
        /* 以下三值为默认值 */
        transition-property: all; transition-timing-function: ease; transition-delay: 0s;
    }    
    .test:hover{
        width: 500px;
    }
    </style>
    <div></div>

    transition-delay

    语法:

    transition-delay : <time> [, <time>]

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

    有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果,那么我们只要把几个transition的声明串在一起,用逗号(',')隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式;但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为transition-duration第二个为transition-delay

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

    如果想给元素执行所有transition效果的属性,还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式

     a {
      -moz-transition: all 0.5s ease-in; 
      -webkit-transition: all 0.5s ease-in; 
      -o-transition: all 0.5s ease-in; 
      transition: all 0.5s ease-in;
    }

    综合上述我们可以给transition一个速记法:transition:<property><duration><animation type><delay>,相对应的一个示例代码

    p {
      -webkit-transition: all .5s ease-in-out 1s; //Webkit内核
      -o-transition: all .5s ease-in-out 1s; //Opera
      -moz-transition: all .5s ease-in-out 1s; //Mozilla内核
      transition: all .5s ease-in-out 1s; //W3C 标准
    }

    浏览器的兼容性

    为了避免兼容性,在应用transition时我们有必要加上各自的前缀,最好再放上我们W3C的标准写法,这样只要浏览器支持我们的transition属性,那么这种效果就会自动加上去

    transform

    Transform字面上就是变形/改变的意思,在CSS3中transform属性实现了一些可用SVG实现的功能,它可用于内联(inline)元素和块级(block)元素;transform主要包括以下几种:旋转rotate/扭曲skew/缩放scale/移动translate/矩阵变形matrix;下面我们一起来看看CSS3中transform的各个动画具体如何实现

    transform : none | <transform-function> [ <transform-function> ]
    也就是:
    transform: rotate | scale | skew | translate |matrix;

    none表示不进行变换;表示一个或多个变换函数,以空格分开,即我们同时对一个元素进行transform的多种属性操作,例如rotate/scale/translate三种,但以往我们叠加效果都是用逗号(,)隔开,但transform中使用多个属性时却需要有空格隔开

    旋转rotate

    rotate():通过指定的角度参数对原元素指定一个2D rotation(2D旋转),需先有transform-origin属性的定义;transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数则表示逆时针旋转;如:transform:rotate(30deg)

    <style>
    #current
    {
        width:200px;
        height:100px;
        color:white;
        background-color: #3EDFF4;
        text-align:center;
        transform-origin:20px 20px;  /* 改变基点 */
        -webkit-transform-origin:20px 20px;
        -moz-transform-origin:20px 20px;
        transform:rotate(30deg);
        -webkit-transform:rotate(30deg);  /*兼容-webkit-引擎浏览器*/
        -moz-transform:rotate(30deg);     /*兼容-moz-引擎浏览器*/
    }
    </style>
    <div id="current"></div>

    移动translate

    移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)

    translate([, ])

    通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数,ty是第二个过渡值参数选项;如果未被提供,则ty以0作为其值,也就是translate(x,y):表示对象按照设定的x,y参数值进行平移,当值为负数时反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点;如transform:translate(100px,20px)

    <style>
    #current
    {
        width:200px;
        height:100px;
        color:white;
        background-color: #3EDFF4;
        text-align:center;
        transform:translate(20px,20px);
        -webkit-transform:translate(20px,20px);  /*兼容-webkit-引擎浏览器*/
        -moz-transform:translate(20px,20px);     /*兼容-moz-引擎浏览器*/
    }
    </style>
    <div id="current"></div>

    translateX()

    通过给定一个X方向上的数值指定一个translation,只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置;如:transform:translateX(100px)

    translateY()

    通过给定Y方向的数目指定一个translation,只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置;如:transform:translateY(20px)

    缩放scale

    缩放scale和移动translate极其相似,他也具有三种情况:scale(x,y):使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放),scaleX(x):元素仅水平方向缩放(X轴缩放),scaleY(y):元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1元素缩小

    scale([, ])

    提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放);如果第二个参数未提供则取与第一个参数一样的值,scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;其中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值则表示X/Y两个方向的缩放倍数是一样的,并以X为准;如:transform:scale(2,1.5)

    <style>
    #current
    {
        width:200px;
        height:100px;
        color:white;
        background-color: #3EDFF4;
        text-align:center;
        transform:translate(20px,20px);
        -webkit-transform:translate(20px,20px);  /*兼容-webkit-引擎浏览器*/
        -moz-transform:translate(20px,20px);     /*兼容-moz-引擎浏览器*/
    }
    </style>
    <div id="current"></div>

    scaleX()

    使用[sx,1]缩放矢量执行缩放操作,sx为所需参数;scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点;如:transform:scaleX(2)

    scaleY()

    使用[1,sy] 缩放矢量执行缩放操作,sy为所需参数;scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点;如:transform:scaleY(2)

    扭曲skew

    扭曲skew和translate/scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形),skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形),skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

    skew( [, ])

    X轴Y轴上的skew transformation(斜切变换);第一个参数对应X轴,第二个参数对应Y轴;如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切;skew是用来对元素进行扭曲变形,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度;其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg;同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置;如:transform:skew(30deg,10deg)

    <style>
    #current
    {
        width:200px;
        height:100px;
        color:white;
        background-color: #3EDFF4;
        text-align:center;
        transform:skew(30deg,10deg);
        -webkit-transform:skew(30deg,10deg);  /*兼容-webkit-引擎浏览器*/
        -moz-transform:skew(30deg,10deg);    /*兼容-moz-引擎浏览器*/
    }
    </style>
    <div id="current"></div>

    skewX()

    按给定的角度沿X轴指定一个skew transformation(斜切变换);skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变形,同样可以通过transform-origin来改变元素的基点;如:transform:skewX(30deg)

    矩阵matrix

    matrix(,,,,,):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵;就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素;此属性值使用涉及到数学中的矩阵,在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法

    改变元素基点transform-origin

    前面我们多次提到transform-origin这个东东,他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置;换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate/translate/scale/skew/matrix等操作都是以元素自己中心位置进行变化的,但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin使元素基点不在是中心位置,以达到你需要的基点位置;下面我们主要来看看其使用规则

    transform-origin(X,Y):用来设置元素的运动的基点(参照点),默认点是元素的中心点,其中X和Y的值可以是百分值/em/px,其中X也可以是字符参数值left/center/right,Y和X一样除了百分值外还可以设置字符值top/center/bottom,这个看上去有点像我们background-position设置一样,下面我列出他们相对应的写法:

    属性值 属性含义
    top left / left top 等价于 0 0 / 0% 0%
    top / top center / center top 等价于 50% 0
    right top / top right 等价于 100% 0
    left / left center / center left 等价于 0 50% / 0% 50%
    center / center center 等价于 50% 50% (默认值)
    right / right center / center right 等价于 100% 50%
    bottom left / left bottom 等价于 0 100% / 0% 100%
    bottom / bottom center / center bottom 等价于 50% 100%
    bottom right right bottom 等价于 100% 100%

    其中left/center/right是水平方向取值,对应的百分值为left=0%/center=50%/right=100%,而top/center/bottom是垂直方向的取值,其中top=0%/center=50%/bottom=100%;如果只取一个值,表示垂直方向值不变

    更多改变中心基点的办法,大家可以在本地多体会,这里还要提醒的是:transform-origin并不是transform中的属性值,他具有自己的语法,而且transform-origin跟其他的css3属性一样需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:

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

    transform在不同浏览器内核下的书写规则

      -moz-transform: rotate | scale | skew | translate ; //Mozilla内核浏览器:firefox3.5+ 
      -webkit-transform: rotate | scale | skew | translate ; //Webkit内核浏览器:Safari and Chrome 
      -o-transform: rotate | scale | skew | translate ; //Opera 
      -ms-transform: rotate | scale | skew | translate ; //IE9 
      transform: rotate | scale | skew | translate ; //W3C标准

    同样的transform在IE9下版本是无法兼容的

    举个同时使用多个属性的例子

    <style type="text/css">      
       #current
       {
           width:200px;
           height:100px;
           color:white;
           background-color: #3EDFF4;
           text-align:center;
          
           transition:1s;
       }
       #current:hover{
            transform:scale(0.5,1) rotate(30deg);
       }
    </style>
    <div id="current"></div>

    Animation

    我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,现在我们趁着这个热劲继续第三个动画属性Animation的学习;单从Animation字面上的意思,我们就知道是"动画",但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Flash/JavaScript/jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画可以省去复杂的js/jquery代码

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧";前面我们在使用transition制作一个简单的transition效果时,包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值;如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作,用Transition就很难实现了,此时我们也需要这样的一个"关键帧"来控制;那么CSS3的Animation就是由"Keyframes"这个属性来实现这样的效果

    Keyframes具有自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个"动画名称"加上一对花括号"{}",括号中就是一些不同时间段样式规则,有点像我们css的样式写法;一个"@keyframes"中的样式规则是由多个百分比构成的,如"0%"到"100%"之间,我们可以在这个规则中创建多个百分比,分别在每个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种不断变化的效果,比如移动/改变元素颜色/位置/大小/形状等;不过有一点需要注意的是,我们可以使用"fromt"/"to"来代表一个动画是从哪开始/到哪结束,也就是说"from"就相当于"0%"而"to"相当于"100%";值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号;如果没有加上的话,我们这个keyframes是无效的,不起任何作用;因为keyframes的单位只接受百分比值

    Keyframes语法

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

    其中IDENT是一个动画名称,可以随便取,当然语义化一点更好;Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left/background等,value就是相对应的属性的属性值

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

    这里我们定义了一个叫"wobble"的动画,从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处背景色变成red

    Keyframes定义好后,我们需要怎么去调用刚才定义好的动画"wobble"?

    CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值;他们主要区别是:transition需要触发一个事件(hover/click等)才会随时间改变其css属性,而animation不需要触发任何事件的情况也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,这样我们就可以直接在一个元素中调用animation的动画属性;基于这一点,css3的animation就需要明确的动画属性值,这也就回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果

    .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;/*定义动画方式*/
    }

    animation-name - 设置动画名

    主要是用来调用@keyframes定义好的动画;animation-name调用的动画名需要和"@keyframes"定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果

    animation-name: none / IDENT

    IDENT是由@keyframes创建的动画名,我们可以同时附几个animation给一个元素,只需要用逗号隔开;none为默认值,当值为none时将没有任何动画效果,这可以用于覆盖任何动画

    注意:需要在Chrome和Safari上面的基础上加上-webkit-前缀,Firefox加上-moz-

    animation-duration - 设置动画播放时间

    主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间;单位:S秒

    animation-duration: <time>

    取值为数值,单位为秒,其默认值为0,这意味着动画周期为0,也就是没有动画效果(如果值为负值会被视为0)

    animation-timing-function - 设置动画播放方式

    主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式

    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) 

    它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier

    animation-delay - 设置动画开始播放的时间

    用来触发动画播放的时间点,和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间

    animation-delay:<time>

    制作一个矩形变成圆形的动画,浏览器渲染样式之后1S之后触发toradius动画,整个动画播放时间持续了10s钟

    <div>Hover Me</div>
    <style>
    @keyframes toradius{
      from {
        border-radius: 0;
      }
      to {
        border-radius: 100%;
      }
    }
    div {
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: #fff;
      background: green;
      margin: 20px auto;
    }
    div:hover {
      animation-name: toradius;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-delay: .1s;
    }
    </style>

    animation-iteration-count - 定义动画的播放次数

    animation-iteration-count: infinite | <number>

    其值通常为整数,但也可以使用带有小数的数字,其默认值为1,意味着动画将从开始到结束只播放一次;如果取值为infinite,动画将会无限次的播放

    注意:Chrome或Safari浏览器,需要加入-webkit-前缀

    animation-direction - 设置动画播放方向

    animation-direction:normal | alternate

    其主要有两个值:normal/alternate;如果设置为normal(默认值),动画的每次循环都是向前播放;另一个值是alternate,它的作用是动画播放在第偶数次向前播放,第奇数次向反方向播放

    注意:Chrome或Safari浏览器,需要加入-webkit-前缀

    animation-play-state - 控制元素动画的播放状态

    animation-play-state:running | paused

    其参数主要有两个值:running和paused,主要作用就是类似于音乐播放器一样;通过paused将正在播放的动画停下来,也可以通过running(默认值)将暂停的动画重新播放;这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放;另外如果暂停了动画的播放,元素的样式将回到最原始设置状态;例如:页面加载时动画不播放,代码如下:

    animation-play-state:paused;

    animation-fill-mode - 设置动画时间外属性

    animation-fill-mode属性定义在动画开始之前和结束之后发生的操作,主要具有四个属性值:none/forwards/backwords/both;其四个属性值对应效果如下:

    属性值 效果
    none 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
    forwards 表示动画在结束后继续应用最后的关键帧的位置
    backwards 会在向元素应用动画样式时迅速应用动画的初始帧
    both 元素动画同时具有forwards和backwards效果

    默认情况下,动画不会影响它关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为;简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上,或者同时具有这两个效果

    例如:让动画停在最后一帧处,代码如下:

    animation-fill-mode:forwards; 

    常用动画总结

    淡入

    @-webkit-keyframes fadein{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    @-moz-keyframes fadein{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    @-ms-keyframes fadein{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    @keyframes fadein{
        0%{opacity:0;}
        100%{opacity:1;}
    }

    淡入-从上

    @-webkit-keyframes fadeinT{
        0%{opacity:0;-webkit-transform:translateY(-100px);}
        100%{opacity:1;-webkit-transform:translateY(0);}
    }
    @-moz-keyframes fadeinT{
        0%{opacity:0;-moz-transform:translateY(-100px);}
        100%{opacity:1;-moz-transform:translateY(0);}
    }
    @-ms-keyframes fadeinT{
        0%{opacity:0;-ms-transform:translateY(-100px);}
        100%{opacity:1;-ms-transform:translateY(0);}
    }
    @keyframes fadeinT{
        0%{opacity:0;transform:translateY(-100px);}
        100%{opacity:1;transform:translateY(0);}
    }

    淡入-从右

    @-webkit-keyframes fadeinR{
        0%{opacity:0;-webkit-transform:translateX(100px);}
        100%{opacity:1;-webkit-transform:translateX(0);}
    }
    @-moz-keyframes fadeinR{
        0%{opacity:0;-moz-transform:translateX(100px);}
        100%{opacity:1;-moz-transform:translateX(0);}
    }
    @-ms-keyframes fadeinR{
        0%{opacity:0;-ms-transform:translateX(100px);}
        100%{opacity:1;-ms-transform:translateX(0);}
    }
    @keyframes fadeinR{
        0%{opacity:0;transform:translateX(100px);}
        100%{opacity:1;transform:translateX(0);}
    }

    淡入-从下

    @-webkit-keyframes fadeinB{
        0%{opacity:0;-webkit-transform:translateY(100px);}
        100%{opacity:1;-webkit-transform:translateY(0);}
    }
    @-moz-keyframes fadeinB{
        0%{opacity:0;-moz-transform:translateY(100px);}
        100%{opacity:1;-moz-transform:translateY(0);}
    }
    @-ms-keyframes fadeinB{
        0%{opacity:0;-ms-transform:translateY(100px);}
        100%{opacity:1;-ms-transform:translateY(0);}
    }
    @keyframes fadeinB{
        0%{opacity:0;transform:translateY(100px);}
        100%{opacity:1;transform:translateY(0);}
    }

    淡入-从左

    @-webkit-keyframes fadeinL{
        0%{opacity:0;-webkit-transform:translateX(-100px);}
        100%{opacity:1;-webkit-transform:translateX(0);}
    }
    @-moz-keyframes fadeinL{
        0%{opacity:0;-moz-transform:translateX(-100px);}
        100%{opacity:1;-moz-transform:translateX(0);}
    }
    @-ms-keyframes fadeinL{
        0%{opacity:0;-ms-transform:translateX(-100px);}
        100%{opacity:1;-ms-transform:translateX(0);}
    }
    @keyframes fadeinL{
        0%{opacity:0;transform:translateX(-100px);}
        100%{opacity:1;transform:translateX(0);}
    }

    淡出

    @-webkit-keyframes fadeout{
        0%{opacity:1;}
        100%{opacity:0;}
    }
    @-moz-keyframes fadeout{
        0%{opacity:1;}
        100%{opacity:0;}
    }
    @-ms-keyframes fadeout{
        0%{opacity:1;}
        100%{opacity:0;}
    }
    @keyframes fadeout{
        0%{opacity:1;}
        100%{opacity:0;}
    }

    淡出-向右

    @-webkit-keyframes fadeoutR{
        0%{opacity:1;-webkit-transform:translateX(0);}
        100%{opacity:0;-webkit-transform:translateX(100px);}
    }
    @-moz-keyframes fadeoutR{
        0%{opacity:1;-moz-transform:translateX(0);}
        100%{opacity:0;-moz-transform:translateX(100px);}
    }
    @-ms-keyframes fadeoutR{
        0%{opacity:1;-ms-transform:translateX(0);}
        100%{opacity:0;-ms-transform:translateX(100px);}
    }
    @keyframes fadeoutR{
        0%{opacity:1;transform:translateX(0);}
        100%{opacity:0;transform:translateX(100px);}
    }

    淡出-向下

    @-webkit-keyframes fadeoutB{
        0%{opacity:1;-webkit-transform:translateY(0);}
        100%{opacity:0;-webkit-transform:translateY(100px);}
    }
    @-moz-keyframes fadeoutB{
        0%{opacity:1;-moz-transform:translateY(0);}
        100%{opacity:0;-moz-transform:translateY(100px);}
    }
    @-ms-keyframes fadeoutB{
        0%{opacity:1;-ms-transform:translateY(0);}
        100%{opacity:0;-ms-transform:translateY(100px);}
    }
    @keyframes fadeoutB{
        0%{opacity:1;transform:translateY(0);}
        100%{opacity:0;transform:translateY(100px);}
    }

    淡出-向左

    @-webkit-keyframes fadeoutL{
        0%{opacity:1;-webkit-transform:translateX(0);}
        100%{opacity:0;-webkit-transform:translateX(-100px);}
    }
    @-moz-keyframes fadeoutL{
        0%{opacity:1;-moz-transform:translateX(0);}
        100%{opacity:0;-moz-transform:translateX(-100px);}
    }
    @-ms-keyframes fadeoutL{
        0%{opacity:1;-ms-transform:translateX(0);}
        100%{opacity:0;-ms-transform:translateX(-100px);}
    }
    @keyframes fadeoutL{
        0%{opacity:1;transform:translateX(0);}
        100%{opacity:0;transform:translateX(-100px);}
    }

    弹跳

    @-webkit-keyframes bounce{
        0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
        40%{-webkit-transform:translateY(-30px);}
        60%{-webkit-transform:translateY(-15px);}
    }
    @-moz-keyframes bounce{
        0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
        40%{-moz-transform:translateY(-30px);}
        60%{-moz-transform:translateY(-15px);}
    }
    @-ms-keyframes bounce{
        0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
        40%{-ms-transform:translateY(-30px);}
        60%{-ms-transform:translateY(-15px);}
    }
    @keyframes bounce{
        0%,20%,50%,80%,100%{transform:translateY(0);}
        40%{transform:translateY(-30px);}
        60%{transform:translateY(-15px);}
    }

    弹入

    @-webkit-keyframes bouncein{
        0%{opacity:0;-webkit-transform:scale(0.3);}
        50%{opacity:1;-webkit-transform:scale(1.05);}
        70%{-webkit-transform:scale(0.9);}
        100%{-webkit-transform:scale(1);}
    }
    @-moz-keyframes bouncein{
        0%{opacity:0;-moz-transform:scale(0.3);}
        50%{opacity:1;-moz-transform:scale(1.05);}
        70%{-moz-transform:scale(0.9);}
        100%{-moz-transform:scale(1);}
    }
    @-ms-keyframes bouncein{
        0%{opacity:0;-ms-transform:scale(0.3);}
        50%{opacity:1;-ms-transform:scale(1.05);}
        70%{-ms-transform:scale(0.9);}
        100%{-ms-transform:scale(1);}
    }
    @keyframes bouncein{
        0%{opacity:0;transform:scale(0.3);}
        50%{opacity:1;transform:scale(1.05);}
        70%{transform:scale(0.9);}
        100%{transform:scale(1);}
    }

    弹入-从上

    @-webkit-keyframes bounceinT{
        0%{opacity:0;-webkit-transform:translateY(-100px);}
        60%{opacity:1;-webkit-transform:translateY(30px);}
        80%{-webkit-transform:translateY(-10px);}
        100%{-webkit-transform:translateY(0);}
    }
    @-moz-keyframes bounceinT{
        0%{opacity:0;-moz-transform:translateY(-100px);}
        60%{opacity:1;-moz-transform:translateY(30px);}
        80%{-moz-transform:translateY(-10px);}
        100%{-moz-transform:translateY(0);}
    }
    @-ms-keyframes bounceinT{
        0%{opacity:0;-ms-transform:translateY(-100px);}
        60%{opacity:1;-ms-transform:translateY(30px);}
        80%{-ms-transform:translateY(-10px);}
        100%{-ms-transform:translateY(0);}
    }
    @keyframes bounceinT{
        0%{opacity:0;transform:translateY(-100px);}
        60%{opacity:1;transform:translateY(30px);}
        80%{transform:translateY(-10px);}
        100%{transform:translateY(0);}
    }

    弹入-从右

    @-webkit-keyframes bounceinR{
        0%{opacity:0;-webkit-transform:translateX(100px);}
        60%{opacity:1;-webkit-transform:translateX(-30px);}
        80%{-webkit-transform:translateX(10px);}
        100%{-webkit-transform:translateX(0);}
    }
    @-moz-keyframes bounceinR{
        0%{opacity:0;-moz-transform:translateX(100px);}
        60%{opacity:1;-moz-transform:translateX(-30px);}
        80%{-moz-transform:translateX(10px);}
        100%{-moz-transform:translateX(0);}
    }
    @-ms-keyframes bounceinR{
        0%{opacity:0;-ms-transform:translateX(100px);}
        60%{opacity:1;-ms-transform:translateX(-30px);}
        80%{-ms-transform:translateX(10px);}
        100%{-ms-transform:translateX(0);}
    }
    @keyframes bounceinR{
        0%{opacity:0;transform:translateX(100px);}
        60%{opacity:1;transform:translateX(-30px);}
        80%{transform:translateX(10px);}
        100%{transform:translateX(0);}
    }

    弹入-从下

    @-webkit-keyframes bounceinB{
        0%{opacity:0;-webkit-transform:translateY(100px);}
        60%{opacity:1;-webkit-transform:translateY(-30px);}
        80%{-webkit-transform:translateY(10px);}
        100%{-webkit-transform:translateY(0);}
    }
    @-moz-keyframes bounceinB{
        0%{opacity:0;-moz-transform:translateY(100px);}
        60%{opacity:1;-moz-transform:translateY(-30px);}
        80%{-moz-transform:translateY(10px);}
        100%{-moz-transform:translateY(0);}
    }
    @-ms-keyframes bounceinB{
        0%{opacity:0;-ms-transform:translateY(100px);}
        60%{opacity:1;-ms-transform:translateY(-30px);}
        80%{-ms-transform:translateY(10px);}
        100%{-ms-transform:translateY(0);}
    }
    @keyframes bounceinB{
        0%{opacity:0;transform:translateY(100px);}
        60%{opacity:1;transform:translateY(-30px);}
        80%{transform:translateY(10px);}
        100%{transform:translateY(0);}
    }

    弹入-从左

    @-webkit-keyframes bounceinL{
        0%{opacity:0;-webkit-transform:translateX(-100px);}
        60%{opacity:1;-webkit-transform:translateX(30px);}
        80%{-webkit-transform:translateX(-10px);}
        100%{-webkit-transform:translateX(0);}
    }
    @-moz-keyframes bounceinL{
        0%{opacity:0;-moz-transform:translateX(-100px);}
        60%{opacity:1;-moz-transform:translateX(30px);}
        80%{-moz-transform:translateX(-10px);}
        100%{-moz-transform:translateX(0);}
    }
    @-ms-keyframes bounceinL{
        0%{opacity:0;-ms-transform:translateX(-100px);}
        60%{opacity:1;-ms-transform:translateX(30px);}
        80%{-ms-transform:translateX(-10px);}
        100%{-ms-transform:translateX(0);}
    }
    @keyframes bounceinL{
        0%{opacity:0;transform:translateX(-100px);}
        60%{opacity:1;transform:translateX(30px);}
        80%{transform:translateX(-10px);}
        100%{transform:translateX(0);}
    }

    弹出

    @-webkit-keyframes bounceout{
        0%{-webkit-transform:scale(1);}
        25%{-webkit-transform:scale(0.95);}
        50%{opacity:1;-webkit-transform:scale(1.1);}
        100%{opacity:0;-webkit-transform:scale(0.3);}
    }
    @-moz-keyframes bounceout{
        0%{-moz-transform:scale(1);}
        25%{-moz-transform:scale(0.95);}
        50%{opacity:1;-moz-transform:scale(1.1);}
        100%{opacity:0;-moz-transform:scale(0.3);}
    }
    @-ms-keyframes bounceout{
        0%{-ms-transform:scale(1);}
        25%{-ms-transform:scale(0.95);}
        50%{opacity:1;-ms-transform:scale(1.1);}
        100%{opacity:0;-ms-transform:scale(0.3);}
    }
    @keyframes bounceout{
        0%{transform:scale(1);}
        25%{transform:scale(0.95);}
        50%{opacity:1;transform:scale(1.1);}
        100%{opacity:0;transform:scale(0.3);}
    }

    弹出-向上

    @-webkit-keyframes bounceoutT{
        0%{-webkit-transform:translateY(0);}
        20%{opacity:1;-webkit-transform:translateY(20px);}
        100%{opacity:0;-webkit-transform:translateY(-100px);}
    }
    @-moz-keyframes bounceoutT{
        0%{-moz-transform:translateY(0);}
        20%{opacity:1;-moz-transform:translateY(20px);}
        100%{opacity:0;-moz-transform:translateY(-100px);}
    }
    @-ms-keyframes bounceoutT{
        0%{-ms-transform:translateY(0);}
        20%{opacity:1;-ms-transform:translateY(20px);}
        100%{opacity:0;-ms-transform:translateY(-100px);}
    }
    @keyframes bounceoutT{
        0%{transform:translateY(0);}
        20%{opacity:1;transform:translateY(20px);}
        100%{opacity:0;transform:translateY(-100px);}
    }

    弹出-向右

    @-webkit-keyframes bounceoutR{
        0%{-webkit-transform:translateX(0);}
        20%{opacity:1;-webkit-transform:translateX(-20px);}
        100%{opacity:0;-webkit-transform:translateX(100px);}
    }
    @-moz-keyframes bounceoutR{
        0%{-moz-transform:translateX(0);}
        20%{opacity:1;-moz-transform:translateX(-20px);}
        100%{opacity:0;-moz-transform:translateX(100px);}
    }
    @-ms-keyframes bounceoutR{
        0%{-ms-transform:translateX(0);}
        20%{opacity:1;-ms-transform:translateX(-20px);}
        100%{opacity:0;-ms-transform:translateX(100px);}
    }
    @keyframes bounceoutR{
        0%{transform:translateX(0);}
        20%{opacity:1;transform:translateX(-20px);}
        100%{opacity:0;transform:translateX(100px);}
    }

    弹出-向下

    @-webkit-keyframes bounceoutB{
        0%{-webkit-transform:translateY(0);}
        20%{opacity:1;-webkit-transform:translateY(-20px);}
        100%{opacity:0;-webkit-transform:translateY(100px);}
    }
    @-moz-keyframes bounceoutB{
        0%{-moz-transform:translateY(0);}
        20%{opacity:1;-moz-transform:translateY(-20px);}
        100%{opacity:0;-moz-transform:translateY(100px);}
    }
    @-ms-keyframes bounceoutB{
        0%{-ms-transform:translateY(0);}
        20%{opacity:1;-ms-transform:translateY(-20px);}
        100%{opacity:0;-ms-transform:translateY(100px);}
    }
    @keyframes bounceoutB{
        0%{transform:translateY(0);}
        20%{opacity:1;transform:translateY(-20px);}
        100%{opacity:0;transform:translateY(100px);}
    }

    弹出-向左

    @-webkit-keyframes bounceoutL{
        0%{-webkit-transform:translateX(0);}
        20%{opacity:1;-webkit-transform:translateX(20px);}
        100%{opacity:0;-webkit-transform:translateX(-100px);}
    }
    @-moz-keyframes bounceoutL{
        0%{-moz-transform:translateX(0);}
        20%{opacity:1;-moz-transform:translateX(20px);}
        100%{opacity:0;-moz-transform:translateX(-100px);}
    }
    @-ms-keyframes bounceoutL{
        0%{-ms-transform:translateX(0);}
        20%{opacity:1;-ms-transform:translateX(20px);}
        100%{opacity:0;-ms-transform:translateX(-100px);}
    }
    @keyframes bounceoutL{
        0%{transform:translateX(0);}
        20%{opacity:1;transform:translateX(20px);}
        100%{opacity:0;transform:translateX(-200px);}
    }

    转入

    @-webkit-keyframes rotatein{
        0%{opacity:0;-webkit-transform:rotate(-200deg);}
        100%{opacity:1;-webkit-transform:rotate(0);}
    }
    @-moz-keyframes rotatein{
        0%{opacity:0;-moz-transform:rotate(-200deg);}
        100%{opacity:1;-moz-transform:rotate(0);}
    }
    @-ms-keyframes rotatein{
        0%{opacity:0;-ms-transform:rotate(-200deg);}
        100%{opacity:1;-ms-transform:rotate(0);}
    }
    @keyframes rotatein{
        0%{opacity:0;transform:rotate(-200deg);}
        100%{opacity:1;transform:rotate(0);}
    }

    转入-从左上

    @-webkit-keyframes rotateinLT{
        0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
        100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
    }
    @-moz-keyframes rotateinLT{
        0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
        100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
    }
    @-ms-keyframes rotateinLT{
        0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
        100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
    }
    @keyframes rotateinLT{
        0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
        100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    }

    转入-从左下

    @-webkit-keyframes rotateineftB{
        0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
        100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
    }
    @-moz-keyframes rotateineftB{
        0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
        100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
    }
    @-ms-keyframes rotateineftB{
        0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
        100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
    }
    @keyframes rotateineftB{
        0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
        100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    }

    转入-从右上

    @-webkit-keyframes rotateinRT{
        0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
        100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
    }
    @-moz-keyframes rotateinRT{
        0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
        100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
    }
    @-ms-keyframes rotateinRT{
        0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
        100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
    }
    @keyframes rotateinRT{
        0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
        100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    }

    转入-从右下

    @-webkit-keyframes rotateinRB{
        0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
        100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
    }
    @-moz-keyframes rotateinRB{
        0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
        100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
    }
    @-ms-keyframes rotateinRB{
        0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
        100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
    }
    @keyframes rotateinRB{
        0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
        100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    }

    转出

    @-webkit-keyframes rotateout{
        0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
        100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
    }
    @-moz-keyframes rotateout{
        0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
        100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
    }
    @-ms-keyframes rotateout{
        0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}
        100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
    }
    @keyframes rotateout{
        0%{transform-origin:center center;transform:rotate(0);opacity:1;}
        100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
    }

    转出-向左上

    @-webkit-keyframes rotateoutLT{
        0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
        100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
    }
    @-moz-keyframes rotateoutLT{
        0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
        100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
    }
    @-ms-keyframes rotateoutLT{
        0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
        100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
    }
    @keyframes rotateoutLT{
        0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
        100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    }

    转出-向左下

    @-webkit-keyframes rotateoutLB{
        0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
        100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
    }
    @-moz-keyframes rotateoutLB{
        0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
        100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
    }
    @-ms-keyframes rotateoutLB{
        0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
        100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
    }
    @keyframes rotateoutLB{
        0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
        100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    }

    转出-向右上

    @-webkit-keyframes rotateoutRT{
        0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
        100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
    }
    @-moz-keyframes rotateoutRT{
        0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
        100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
    }
    @-ms-keyframes rotateoutRT{
        0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
        100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
    }
    @keyframes rotateoutRT{
        0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
        100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    }

    转出-向右下

    @-webkit-keyframes rotateoutBR{
        0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
        100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
    }
    @-moz-keyframes rotateoutBR{
        0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
        100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
    }
    @-ms-keyframes rotateoutBR{
        0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
        100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
    }
    @keyframes rotateoutBR{
        0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
        100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    }

    翻转

    @-webkit-keyframes flip{
        0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
        40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
        50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
        80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
        100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
    }
    @-moz-keyframes flip{
        0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
        40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
        50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
        80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
        100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
    }
    @-ms-keyframes flip{
        0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
        40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
        50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
        80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
        100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
    }
    @keyframes flip{
        0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
        40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
        50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
        80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
        100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
    }

    翻入-X轴

    @-webkit-keyframes flipinX{
        0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
        40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
        70%{-webkit-transform:perspective(400px) rotateX(10deg);}
        100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
    }
    @-moz-keyframes flipinX{
        0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
        40%{-moz-transform:perspective(400px) rotateX(-10deg);}
        70%{-moz-transform:perspective(400px) rotateX(10deg);}
        100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
    }
    @-ms-keyframes flipinX{
        0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
        40%{-ms-transform:perspective(400px) rotateX(-10deg);}
        70%{-ms-transform:perspective(400px) rotateX(10deg);}
        100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
    }
    @keyframes flipinX{
        0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
        40%{transform:perspective(400px) rotateX(-10deg);}
        70%{transform:perspective(400px) rotateX(10deg);}
        100%{transform:perspective(400px) rotateX(0);opacity:1;}
    }

    翻入-Y轴

    @-webkit-keyframes flipinY{
        0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
        70%{-webkit-transform:perspective(400px) rotateY(10deg);}
        100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
    }
    @-moz-keyframes flipinY{
        0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-moz-transform:perspective(400px) rotateY(-10deg);}
        70%{-moz-transform:perspective(400px) rotateY(10deg);}
        100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
    }
    @-ms-keyframes flipinY{
        0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-ms-transform:perspective(400px) rotateY(-10deg);}
        70%{-ms-transform:perspective(400px) rotateY(10deg);}
        100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
    }
    @keyframes flipinY{
        0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{transform:perspective(400px) rotateY(-10deg);}
        70%{transform:perspective(400px) rotateY(10deg);}
        100%{transform:perspective(400px) rotateY(0);opacity:1;}
    }

    翻出-X轴

    @-webkit-keyframes flipoutX{
        0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
        100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
    }
    @-moz-keyframes flipoutX{
        0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
        100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
    }
    @-ms-keyframes flipoutX{
        0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
        100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
    }
    @keyframes flipoutX{
        0%{transform:perspective(400px) rotateX(0);opacity:1;}
        100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
    }

    翻出-Y轴

    @-webkit-keyframes flipoutY{
        0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
        100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
    }
    @-moz-keyframes flipoutY{
        0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
        100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
    }
    @-ms-keyframes flipoutY{
        0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
        100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
    }
    @keyframes flipoutY{
        0%{transform:perspective(400px) rotateY(0);opacity:1;}
        100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
    }

    闪烁

    @-webkit-keyframes flash{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0;}
    }
    @-moz-keyframes flash{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0;}
    }
    @-ms-keyframes flash{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0;}
    }
    @keyframes flash{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0;}
    }

    震颤

    @-webkit-keyframes shake{
        0%,100%{-webkit-transform:translateX(0);}
        10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
        20%,40%,60%,80%{-webkit-transform:translateX(10px);}
    }
    @-moz-keyframes shake{
        0%,100%{-moz-transform:translateX(0);}
        10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
        20%,40%,60%,80%{-moz-transform:translateX(10px);}
    }
    @-ms-keyframes shake{
        0%,100%{-ms-transform:translateX(0);}
        10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
        20%,40%,60%,80%{-ms-transform:translateX(10px);}
    }
    @keyframes shake{
        0%,100%{transform:translateX(0);}
        10%,30%,50%,70%,90%{transform:translateX(-10px);}
        20%,40%,60%,80%{transform:translateX(10px);}
    }

    摇摆

    @-webkit-keyframes swing{
        20%{-webkit-transform:rotate(15deg);}
        40%{-webkit-transform:rotate(-10deg);}
        60%{-webkit-transform:rotate(5deg);}
        80%{-webkit-transform:rotate(-5deg);}
        100%{-webkit-transform:rotate(0);}
    }
    @-moz-keyframes swing{
        20%{-moz-transform:rotate(15deg);}
        40%{-moz-transform:rotate(-10deg);}
        60%{-moz-transform:rotate(5deg);}
        80%{-moz-transform:rotate(-5deg);}
        100%{-moz-transform:rotate(0);}
    }
    @-ms-keyframes swing{
        20%{-ms-transform:rotate(15deg);}
        40%{-ms-transform:rotate(-10deg);}
        60%{-ms-transform:rotate(5deg);}
        80%{-ms-transform:rotate(-5deg);}
        100%{-ms-transform:rotate(0);}
    }
    @keyframes swing{
        20%{transform:rotate(15deg);}
        40%{transform:rotate(-10deg);}
        60%{transform:rotate(5deg);}
        80%{transform:rotate(-5deg);}
        100%{transform:rotate(0);}
    }

    摇晃

    @-webkit-keyframes wobble{
        0%{-webkit-transform:translateX(0);}
        15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
        30%{-webkit-transform:translateX(80px) rotate(3deg);}
        45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
        60%{-webkit-transform:translateX(40px) rotate(2deg);}
        75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
        100%{-webkit-transform:translateX(0);}
    }
    @-moz-keyframes wobble{
        0%{-moz-transform:translateX(0);}
        15%{-moz-transform:translateX(-100px) rotate(-5deg);}
        30%{-moz-transform:translateX(80px) rotate(3deg);}
        45%{-moz-transform:translateX(-65px) rotate(-3deg);}
        60%{-moz-transform:translateX(40px) rotate(2deg);}
        75%{-moz-transform:translateX(-20px) rotate(-1deg);}
        100%{-moz-transform:translateX(0);}
    }
    @-ms-keyframes wobble{
        0%{-ms-transform:translateX(0);}
        15%{-ms-transform:translateX(-100px) rotate(-5deg);}
        30%{-ms-transform:translateX(80px) rotate(3deg);}
        45%{-ms-transform:translateX(-65px) rotate(-3deg);}
        60%{-ms-transform:translateX(40px) rotate(2deg);}
        75%{-ms-transform:translateX(-20px) rotate(-1deg);}
        100%{-ms-transform:translateX(0);}
    }
    @keyframes wobble{
        0%{transform:translateX(0);}
        15%{transform:translateX(-100px) rotate(-5deg);}
        30%{transform:translateX(80px) rotate(3deg);}
        45%{transform:translateX(-65px) rotate(-3deg);}
        60%{transform:translateX(40px) rotate(2deg);}
        75%{transform:translateX(-20px) rotate(-1deg);}
        100%{transform:translateX(0);}
    }

    震铃

    @-webkit-keyframes ring{
        0%{-webkit-transform:scale(1);}
        10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
        40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
        100%{-webkit-transform:scale(1) rotate(0);}
    }
    @-moz-keyframes ring{
        0%{-moz-transform:scale(1);}
        10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
        40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
        100%{-moz-transform:scale(1) rotate(0);}
    }
    @-ms-keyframes ring{
        0%{-ms-transform:scale(1);}
        10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
        40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
        100%{-ms-transform:scale(1) rotate(0);}
    }
    @keyframes ring{
        0%{transform:scale(1);}
        10%,20%{transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
        40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
        100%{transform:scale(1) rotate(0);}
    }

    最后给大家上一个完整的例子

    <style>  
    body{  
        overflow: hidden;  
    }    
    .st-container {  
        position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: Arial, sans-serif;  
    }   
    .st-container > input,  .st-container > a {  
        position: fixed; top: 0; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px;  
    } 
    .st-container > input {  
        opacity: 0; z-index: 1000;  
    }  
    .st-container > a {  
        z-index: 10; font-weight: 700; background: #e23a6e; color: #fff;  
        text-align: center;  
        text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
        text-decoration: none;  
    } 
    .st-container:after {  
        content: '';  
        position: fixed;  
        width: 100%;  
        height: 34px;  
        background: #e23a6e;  
        z-index: 9;  
        top: 0;  
    }   
    #st-control-1, #st-control-1 + a {  
        left: 0;  
    } 
    #st-control-2, #st-control-2 + a {  
        left: 20%;  
    }  
    #st-control-3, #st-control-3 + a {  
        left: 40%;  
    }  
    #st-control-4, #st-control-4 + a {  
        left: 60%;  
    }  
    #st-control-5, #st-control-5 + a {  
        left: 80%;  
    }  
    .st-container > input:checked + a,  
    .st-container > input:checked:hover + a{  
        background: #821134;  
    }    
    .st-container > input:checked + a:after,  .st-container > input:checked:hover + a:after{  
        top: 100%;  
        border: solid transparent;  
        content: '';  
        height: 0;  
        width: 0;  
        position: absolute;  
        pointer-events: none;  
        border-top-color: #821134;  
        border-width: 20px;  
        left: 50%;  
        margin-left: -20px;  
    } 
    .st-container > input:hover + a{  
        background: #AD244F;  
    }   
    .st-container > input:hover + a:after {  
        border-bottom-color: #AD244F;  
    }   
    .st-scroll,.st-panel {  
        position: relative;  
        width: 100%;  
        height: 100%;  
    }     
    .st-scroll {  
        top: 0;  
        left: 0;  
        -webkit-transition: all 0.6s ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);  
        -webkit-backface-visibility: hidden;  
        border: solid 1px #ccc;  
    } 
    .st-panel{  
        background: #fff;  
        overflow: hidden;  
    }  
    #st-control-1:checked ~ .st-scroll {  
        -webkit-transform: translateY(0%);  
        background-color: green;  
    }  
    #st-control-2:checked ~ .st-scroll {  
        -webkit-transform: translateY(-100%);  
        background-color: green;  
    }  
    #st-control-3:checked ~ .st-scroll {  
        -webkit-transform: translateY(-200%);  
        background-color: green;  
    }  
    #st-control-4:checked ~ .st-scroll {  
        -webkit-transform: translateY(-300%);  
        background-color: green;  
    }  
    #st-control-5:checked ~ .st-scroll {  
        -webkit-transform: translateY(-400%);  
        background-color: green;  
    }  
    #st-control-1:checked ~ .st-scroll #st-panel-1 h2,  
    #st-control-2:checked ~ .st-scroll #st-panel-2 h2,  
    #st-control-3:checked ~ .st-scroll #st-panel-3 h2,  
    #st-control-4:checked ~ .st-scroll #st-panel-4 h2,  
    #st-control-5:checked ~ .st-scroll #st-panel-5 h2{  
        -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;  
    } 
    @keyframes moveDown{  
        0% {   
            -webkit-transform: translateY(-40px);   
            opacity: 0;  
        }  
        100% {   
            -webkit-transform: translateY(0px);    
            opacity: 1;  
        }  
    } 
    .st-panel h2 {  
        color: #e23a6e;  
        text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
        position: absolute;  
        font-size: 54px;  
        font-weight: 900;  
        width: 80%;  
        left: 10%;  
        text-align: center;  
        line-height: 50px;  
        margin: -70px 0 0 0;  
        padding: 0;  
        top: 50%;  
        -webkit-backface-visibility: hidden;  
    } 
    .st-panel p {  
        position: absolute;  
        text-align: center;  
        font-size: 16px;  
        line-height: 22px;  
        color: #8b8b8b;  
        z-index: 2;  
        padding: 0;  
        width: 50%;  
        left: 25%;  
        top: 50%;  
        margin: 10px 0 0 0;  
        -webkit-backface-visibility: hidden;  
    } 
    </style>  
            <div class="container">            
                <div class="st-container">                
                    <input type="radio" name="radio-set" checked="checked" id="st-control-1">  
                    <a href="#st-panel-1">Serendipity</a>  
                    <input type="radio" name="radio-set" id="st-control-2">  
                    <a href="#st-panel-2">Happiness</a>  
                    <input type="radio" name="radio-set" id="st-control-3">  
                    <a href="#st-panel-3">Tranquillity</a>  
                    <input type="radio" name="radio-set" id="st-control-4">  
                    <a href="#st-panel-4">Positivity</a>  
                    <input type="radio" name="radio-set" id="st-control-5">  
                    <a href="#st-panel-5">Passion</a>                    
                    <div class="st-scroll">                        
                        <section class="st-panel" id="st-panel-1">  
                            <h2>Serendipity</h2>  
                            <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>  
                        </section>
                        <section class="st-panel st-color" id="st-panel-2">  
                            <h2>Happiness</h2>  
                            <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>  
                        </section>
                        <section class="st-panel" id="st-panel-3">  
                            <h2>Tranquillity</h2>  
                            <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>  
                        </section> 
                        <section class="st-panel st-color" id="st-panel-4">  
                            <h2>Positivity</h2>  
                            <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>  
                        </section>  
                        <section class="st-panel" id="st-panel-5">  
                            <h2>Passion</h2>  
                            <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>  
                        </section>  
                    </div>
                </div>
            </div>  

    感悟:拥有健康,你就有可能拥有其他一切;没有健康,你还想拥有什么

    展开全文
  • 我这个页面里有很多项都需要这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最麻烦的还是当窗口缩小时弹出的层会乱飘,后来我使用css3动画来实现,不仅在...

    演示效果

          这是当鼠标移入会在原来的层上显示另一个层的动画,我这个页面里有很多项都需要用这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最麻烦的还是当窗口缩小时弹出的层会乱飘,后来我使用css3动画来实现,不仅在切换间很流畅有一些酷炫的动画效果,而且代码很简洁。


       1. 首先在一个.container-detailed的盒子里建两个盒子,这两个盒子就是用来切换显示和隐藏的。

    <div class="container-detailed">
        <div class="hover-hidden1">
            <img src="images/csdn-2.png" class="img-circle" width="280px" height="280px">
        </div>
        <div class="hover-show1">
            <p>某某某   |   安卓开发</p>
            <p>爱好:骑骑单车,打打游戏</p>
            <p>联系方式:</p>
        </div>
    </div>

    2.为这两个盒子绑定动画

    3.为.container-detailed使用hover事件,用纯css3控制显示

    贴入完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>团队介绍</title>
    	<meta charset = "utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
       <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
       <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" />
    </head>
    <style type="text/css">
    	.hover-show1{
      position: absolute;/*注意这两个盒子要设置为绝对定位*/
      width: 400px;
      height: 300px;
      background: #fe4563;
      text-align: center;
      color: #fff;
      opacity: 0;
      /*为鼠标移入时显示的那个盒子的显示绑定动画*/
      -moz-transition:all 1s linear .3s;
      -webkit-transition:all 1s linear .3s;
      -o-transition:all 1s linear .3s;
      -ms-transition:all 1s linear .3s;
      transition:all 1s linear .3s;
      -moz-transform:translateX(-100px);
      -webkit-transform:translateX(-100px);
      -o-transform:translateX(-100px);
      transform:translateX(-100px);
    }
    .hover-hidden1{
      position: absolute;/*注意这两个盒子要设置为绝对定位*/
      width: 400px;
      text-align: center;
      /*为鼠标移入时隐藏的那个盒子的显示绑定动画*/
      -moz-transition:all 1s ease-out .3s;
      -webkit-transition:all 1s ease-out .3s;
      -o-transition:all 1s ease-out .3s;
      -ms-transition:all 1s ease-out .3s;
      transition:all 1s ease-out .3s;
    }
    .container-detailed:hover .hover-hidden1{
     -moz-transform:rotate(90deg) scale(0.5) ;
      -webkit-transform:rotate(90deg) scale(0.5);
      -o-transform:rotate(90deg) scale(0.5);
      transform:rotate(90deg) scale(0.5);
      opacity: 0;
    }
    .container-detailed:hover .hover-show1{
      -moz-transform:translateX(0px);
      -webkit-transform:translateX(0px);
      -o-transform:translateX(0px);
      transform:translateX(0px);
      opacity: 1;
    }
    </style>
    <body>
    <div class="container-detailed">
    	<div class="hover-hidden1">
    		<img src="images/csdn-2.png" class="img-circle" width="280px" height="280px">
    	</div>
    	<div class="hover-show1">
    		<p>某某某   |   安卓开发</p>
    		<p>爱好:骑骑单车,打打游戏</p>
    		<p>联系方式:</p>
    	</div>
    </div>
    </body>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </html>


    这个动画效果也很棒,当然你也可以修改成自己想要的动画。



    展开全文
  • 当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp...
  • 我们的口号是,能用css解决的事情,就不要动用js 今天的这款效果,鼠标悬停背景图片翻转,无需js,只要一部分的css3代码即可,其他的都是普通的css2代码 使用方法: 1、将head中的lanrenzhijia.css样式引入到...
  • 当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp...

      当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp好用。但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的。但手机硬件处理能力却又十分有限。在四核、八核手机横行的今天,依然有像我这样使用双核或单核手机的。js虽好,单奈何接触不多,调不好那种感觉。一个简单的页面滑动,在i7的pc上运行十分流畅,可是,在我的双核手机上就卡、顿、卡、顿。令人十分郁闷。为此,我也是寻找了很久很久,看了很多很多。终于在不就之前,找到了一种还算简单的方法:使用css3去执行动画。

      在以前,对于动画除了Jquery的animate等动画函数外,更多的是使用setTimeout,setInterval,这样循环的去改变一个元素的margin、width、top等属性。也正是如此,才有了我的困惑。

      首先,setTimeout,setInterval 这货并非你设置0ms它就能一直一直的去执行。曾经在iscroll里调试的时候无意中发现了这个秘密。原来Timer延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率。IE8及其之前的IE版本更新间隔为15.6毫秒。完了,我想它10ms执行1px位移,它还不能准时的干这事。

      而卡又是怎么回事呢?卡,因为代码写的不好。毕竟js是单线程的,一旦有耗时的动作那么UI就可能不响应了。虽然我们使用了setTimeout,但正是因为setTimeout让我们看上去界面没死可动作却又不流畅了。因为这次setTimeout执行之后,在下次执行前,中间这个间隔里很可能遇到另一个耗时的动作,那么,setTimeout的执行就无限后延。然后呢?卡!然而,卡还能有下一个原因,改变原始属性时不小心触发浏览器Layout(即:重布局)。这个问题说它不耗时呢,却又耗时,说它耗时呢,很多时候却又可以忽略。但很多时候其实是不能忽略的。

      除了上面这两段,还有一个问题,就是在很多手机上总感觉是一帧一帧的,而且还可能是一帧长一帧短。这真是能把人都搞废的节奏。为何会这样呢,依然和settimeout的推迟有一定的关系。丢帧。这个问题有涉及到显示器的刷新频率问题。实在太复杂了。

     

      最后选择了CSS3,js动态的改变元素的属性,使用transition来控制动画执行时间。举个例子:

    <div id="test" style="transition:all 1s ease; width:100px;" ></div>
    

    js:

    $("#test").width(200);
    

     

      这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大,慢慢的赶脚,不卡不顿。而且使用css动画有个好处,它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥,但这一点对css动画不成立,并且很多浏览器还能启用硬件加速(比如:Chrome)。虽然浏览器重布局普通情况下感觉不是很明显,但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免,这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。

      详细资料传送门 Javascript高性能动画与页面渲染

      最后附上一些常用的改变时会触发重布局的属性:  
       

       width 
       height 
       padding 
       margin 
       display 
       border-width 
       border 
       min-height

     

      不足之处烦请补充,谅解。

     

    转载于:https://www.cnblogs.com/aser1989/p/4325586.html

    展开全文
  • 这种效果是通过JS给span标签的宽或者高做了动画。我们待会会SVG和CSS渐变来完成。注意,这个技术还是实验性的。 首先,让我们来看看基本的概念,然后我们会朝着这个方向努力。 请注意,我们将在SVG上使用CSS过渡,...
  • 演示 | 下载 今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素...我们待会会SVG和CSS渐变来完成。注意,这个技术还是实验...
        

    演示 | 下载

    今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意,这个技术还是实验性的。

    首先,让我们来看看基本的概念,然后我们会朝着这个方向努力。

    请注意,我们将在SVG上使用CSS过渡,可能无法得到所有浏览器的支持。

    乍眼一看可能不明白这个效果是怎么完成的。我们先仔细看看上面的边就会发现,白色的边的宽度不断从右边往左边延伸,而一条稍微延时的边紧跟着一起移动。每条边都有这样的做法。看起来就像上面的边经过拐角移动到了左边,并以此类推。

    不用SVG也能完成这样的效果,甚至只用伪元素。但是我们想探索一下怎样用CSS而不是JavaScript来控制SVG。

    现在,来思考一下要怎么创建出这样的效果。我们可以改变矩形的troke-dashoffset或者直接画线。我们尝试不用JavaScript的解决方案。我们发现,CSS过渡stroke-dashoffsetstroke-dasharray的值会触发很多BUG。所以我们要尝试不同的解决方案,利用线条和它们的动画,这在CSS里很容易理解和实现。这也给我们更多机会去探索不同的动画效果。

    我们将要使用的线的特别之处是,它们在这个动画里将有三种状态。它们是方盒边长的三倍,其中中间一截是与边等长的间隙。我们将通过设置stroke-dashoffset的值来实现与方盒的边等长。现在,这个动画实现的关键在于线的位置转换:

    bordereffect_01.gif

    SVG与方盒大小一致,就不会看到超出虚线的部分。

    我们先完成第一条线:

    <div>
        <svg width="200" height="200">
            <line x1="0" y1="0" x2="600" y2="0" />
        </svg>
    </div>
    

    这个div长宽20px,和SVG一样。把SVG位置设为absolute,线宽度为10,stroke-dasharray为200。

    div {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        background: #ddd;
    }
    
    svg {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    svg line {
        stroke-width: 10;
        stroke: #000;
        fill: none;
        stroke-dasharray: 200;
        -webkit-transition: -webkit-transform .6s ease-out;
        transition: transform .6s ease-out;
    }
    
    div:hover svg line {
        -webkit-transform: translateX(-400px);
        transform: translateX(-400px);
    }
    

    当数鼠标悬浮在div上时,线也有一个过渡。我们要把线移动到它的三分之二处,所以要在x轴上移动到-400px处,你可以看看这个效果。因为translation不能在这里用百分比做单位,所以用px。

    接着添加其余三条线,gif效果:

    bordereffect_02.gif

    我们需要实现以下效果:线的第一部分移出方盒后,旁边的线的最后一部分移动进来,,这将传进直线在转角处转弯的假象,

    来看看坐标系的定义:

    clipboard.png

    左边的线的坐标是(0,200) 到 (0,-400),底部的是(200,200) 到 (-400,200),右边的是right one (200,0) 到 (200,600):

    <div>
        <svg width="200" height="200">
            <line class="top" x1="0" y1="0" x2="600" y2="0"/>
            <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
            <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
            <line class="right" x1="200" y1="0" x2="200" y2="600"/>
        </svg>
    </div>
    

    给每条线加上不同的hover效果:

    div:hover svg line.top {
      -webkit-transform: translateX(-400px);
      transform: translateX(-400px);
    }
    
    div:hover svg line.bottom {
      -webkit-transform: translateX(400px);
      transform: translateX(400px);
    }
    
    div:hover svg line.left {
      -webkit-transform: translateY(400px);
      transform: translateY(400px);
    }
    
    div:hover svg line.right {
      -webkit-transform: translateY(-400px);
      transform: translateY(-400px);
    }
    

    看看现在的效果

    现在方盒大小改为300 x 460,再给它添加一些内容:

    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="900" y2="0"/>
            <line class="left" x1="0" y1="460" x2="0" y2="-920"/>
            <line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
            <line class="right" x1="300" y1="0" x2="300" y2="1380"/>
        </svg>
        <h3>D</h3>
        <span>2012</span>
        <span>Broccoli, Asparagus, Curry</span>
    </div>
    

    为了实现Carl Philipe Brenner的网站上的效果,我们还要添加颜色过渡效果、盒子阴影等:

    .box {
        width: 300px;
        height: 460px;
        position: relative;
        background: rgba(255,255,255,1);
        display: inline-block;
        margin: 0 10px;
        cursor: pointer;
        color: #2c3e50;
        box-shadow: inset 0 0 0 3px #2c3e50;
        -webkit-transition: background 0.4s 0.5s;
        transition: background 0.4s 0.5s;
    }
    
    .box:hover {
        background: rgba(255,255,255,0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    

    给文字加上样式:

    .box h3 {
        font-family: "Ruthie", cursive;
        font-size: 180px;
        line-height: 370px;
        margin: 0;
        font-weight: 400;
        width: 100%;
    }
    
    .box span {
        display: block;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13px;
        padding: 5px;
    }
    
    .box h3,
    .box span {
        -webkit-transition: color 0.4s 0.5s;
        transition: color 0.4s 0.5s;
    }
    
    .box:hover h3,
    .box:hover span {
        color: #fff;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    

    给SVG和线条添加样式:

    .box svg {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .box svg line {
        stroke-width: 3;
        stroke: #ecf0f1;
        fill: none;
        -webkit-transition: all .8s ease-in-out;
        transition: all .8s ease-in-out;
    }
    

    给线的过渡加上延时:

    .box:hover svg line {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }
    

    之前我们定义的stroke-dasharray只有一个值,但是现在要因尺寸变化而修改

    .box svg line.top,
    .box svg line.bottom {
        stroke-dasharray: 330 240; 
    }
    
    .box svg line.left,
    .box svg line.right {
        stroke-dasharray: 490 400;
    }
    

    如果你尝试这些值,你就能看到这些线条不同的显示效果。

    最后,我们要个hover过渡设置相应的值。因为现在元素是300px宽,所以水平线条改为900px,竖线同理改变:

    .box:hover svg line.top {
        -webkit-transform: translateX(-600px);
        transform: translateX(-600px);
    }
    
    .box:hover svg line.bottom {
        -webkit-transform: translateX(600px);
        transform: translateX(600px);
    }
    
    .box:hover svg line.left {
        -webkit-transform: translateY(920px);
        transform: translateY(920px);
    }
    
    .box:hover svg line.right {
        -webkit-transform: translateY(-920px);
        transform: translateY(-920px);
    }
    

    大功告成。希望能通过这些效果激发你的创意,实现更多的效果~

    演示 | 下载

    英文原文:Creating a Border Animation Effect with SVG and CSS
    SegmentFault整理编译

    展开全文
  • 写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就其写了个焦点轮播图,当然自己也原生JS码了个,当然css3动画无疑是锦上添花,还是要多总结啊,源码...
  • CSS3 transition

    2014-09-08 21:16:00
    最近学习了jQuery,css3相对得较少,众所周知css3在对浏览器有所要求,为了自己设计的网页能更好的满足大部分浏览器,所以很多时候要做动画,都考js来实现,恰好jQuery能对浏览器的很好兼容,所以最近都避开css3。...
  • animate动画、原生JS实现轮播图

    千次阅读 2018-06-09 16:16:41
    最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就其写了个焦点轮播图,当然自己也原生JS码了个,当然css3动画无疑是锦上添花,还是要多总结啊,源码我们会在...
  • 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能...
  • 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能...
  • 学习jscss 写个2048

    2018-02-28 16:04:00
    学习阶段,还是写点小东西练练手学的有意思一点,今天栅格布局做了一个2048,但是移动动画和合并特效没有做,只简单的实现了一下功能。 记录一下学习的过程。 1.入口函数,初始化界面,我这里是直接是一个栅格...
  • 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升,但是css3动画还是有不少局限性,所以有的时候我们还是...
  • 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能...
  • 也罢,我偏要试一下SVG+CSS3能不能搞出这个效果来,o( ̄ヘ ̄o#)。此为前提。 1.基础图形与基础动画先来个简易版的机械人吧,因为重点是动效,所以就简易到不能再简易,全部胶囊样式的圆角矩形来搞,但为了方便...
  • 之前,在研究js作用动画的东东,之前的做动画,的核心基本就是 setTimerout 和我们的 setInterval,但是现在的选择就比较多了可以使用我们的css3 还我们的html5的requestAnimationFrame。 所以,现在我来回到,做...
  • 但是css3动画还是有不少局限性,比如不是所有属性都能参与动画动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeo
  • ...今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Facebook...更重要的是,这个CSS3发光表单基本用CSS3实现,很少的JS代码,在CSS3引擎上优化非常明显。[......] 阅读全文>>

空空如也

空空如也

1 2 3 4 5
收藏数 83
精华内容 33
关键字:

动画用css3还是js