CSS3关于动画的问题,动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。

html-css08

CSS3关于动画的问题,动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。,第1张

jQuery的可以实现:

1.fadeIn(速度,[回调])通过改变所有匹配元素的不透明度来实现淡入效果,并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度,即所有匹配元素的高度和宽度不会改变。

参数速度(字符串,数字):三种预定速度字符串(“慢”,“正常”或“快速”)长的毫秒数值(如:1000)的一个表示动画或

回调(功能):(可选)(可选)例如600毫秒缓慢淡入一段

代码:$(“P”)淡入(“慢“)

用200毫秒快速褪色的段落,然后会弹出一个对话框jQuery代码:。“动画完成”$(“P”)淡入(“快”,函数(){

警报( )

})

2.fadeOut(速度,[回调])通过改变不透明度来实现所有匹配淡入淡出效果的元素,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,即所有匹配元素的高度和宽度不会改变。

参数速度(字符串,数字):三种预定速度字符串(“慢”,“正常”或“快速”)长的毫秒数值(如:1000)的一个表示动画或

回调(功能):(可选)功能例如与段落600毫秒缓慢褪色

代码:$(“P”)。淡出(“慢”)

200毫秒段对话

代码后迅速褪色。 $(“P”)淡出(“快”,函数(){

警报(“动画完成。”)

})

3.fadeTo(速度,透明度,[回调]),所有匹配的元素逐步调整到指定的不透明度,并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度,即所有匹配元素的高度和宽度不会改变。

参数速度(字符串,数字):表示动画或

不透明度(:三种预定速度弦长的毫秒值(1000例)(“慢”,“正常”或“快速”)之一号):调整0和1)的回调(功能)之间的不透明度值(数。 (可选)功能 600毫秒,以缓慢调整到0.66段,能见度的透明度有关的

码2/3。 $(“p”)的fadeTo(“慢”,0.66)$(“P”)。fadeTo(“慢”,0.66)

同款200毫秒快速调整到0.25,能见度约1/4的透明度,然后会弹出一个对话框jQuery代码:$(“P”)。 fadeTo(“快”,0.25,函数(){

警报()“动画完成。”

})

原理就是,先定义一个元素 ,然后定义动画XYZ轴偏移。

body > div > div:after {

    content: ""

    position: absolute

    top: -5px

    box-shadow: 0 0 12px #fff

    left: 50%

    margin-left: -5px

    width: 5px

    height: 5px

    border-radius: 50%

    background-color: #fff

    -webkit-animation: particle_ 2s infinite linear

    animation: particle_ 2s infinite linear

} body > div:nth-of-type(4) > div, body > div:nth-of-type(4) > div:after {

    -webkit-animation-delay: -1.5s

    animation-delay: -1.5s

}

body > div > div {

    width: 200px

    height: 200px

    position: relative

    -webkit-transform-style: preserve-3d

    -webkit-animation: trail_ 2s infinite linear

    transform-style: preserve-3d

    animation: trail_ 2s infinite linear

}

实施步骤:

建立一个BOX

在BOX中制作一个元素。

CSS动画定义BOX旋转按照你的轨迹。

通过。

-webkit-transform:rotateY( 0deg ) rotateZ( 0deg )  rotateX( 0deg )

         -moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )

      -o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )

              transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )

来定义旋转方向,0是不旋转。0-360度是一圈。

       -webkit-transition:transform 1s

transition:transform 1s

这是设置动画时间。

一个BOX完成后,复制box,摆在统一中心点后,设置Z轴的数字。