js綁定css動畫（css3自定義動畫）

本文目錄一覽：

• 1、JS 怎麼動態設置CSS3動畫的樣式
• 2、怎樣用JS把CSS動畫封裝起來
• 3、js+css如何實現動畫效果？
• 4、怎樣實現用js的onclick事件控制css動畫播放
• 5、如何用js控制css中的幀動畫
• 6、怎麼用js觸發css3動畫

JS 怎麼動態設置CSS3動畫的樣式

說說原理，這裡並不是純css3，，只是用css3定義好動畫，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00;}

25% {box-shadow: 0px 0px 8px #f00;}

50% {box-shadow: 0px 0px 0px #f00;}

100% {box-shadow: 0px 0px 8px #f00;}

}

然後，js在切屏後，用Js來觸發這一個樣式，這個樣式調用了剛才定義的動畫。

.tips {

-webkit-animation:tips 1s;

-moz-animation:tips 1s ;

}

當然css3是可以做的，只是用純css3，就沒辦法像這樣可以拖動切屏，這個是需要js或者jq來完成。。。

怎樣用JS把CSS動畫封裝起來

1.進入網站有一個視頻，希望視頻播放完之後觸發CSS3動畫，但是視頻受網絡影響，實際播放完成的時間不好控制。

2.所以css的延遲時間不好控制，如果視頻卡了一下，時間就錯過了

3.怎樣能在視頻完成的時候觸發animation呢?

4.下面是動畫，div從左到右運動

#banner-cloud-1{

position: absolute;

top: 0px;

left: 0;

-webkit-animation:cloud-move-1 5s linear;

-o-animation:cloud-move-1 5s linear;

animation:cloud-move-1 5s linear;

-webkit-animation-delay: 6s;

-o-animation-delay: 6s;

animation-delay: 6s;

-webkit-animation-fill-mode: both;

-o-animation-fill-mode: both;

animation-fill-mode: both;

}

@keyframes cloud-move-1{

from{

left: 0;

}

to{

left:-3760px;

}

}

5.下面是視頻結束時觸發的函數

videos.onended = function(){

//觸發事件一

//觸發事件二

//觸發事件三

//……..

//觸發上面的 animation 動畫

}

js+css如何實現動畫效果？

簡單的不用js就行

!DOCTYPE HTML

html

head

  meta charset= “utf8”

  titleuntitled/title

  link rel = “stylesheet” type = “text/css” href = “”

  style type = “text/css”

  *{

    margin: 0px;

    padding: 0px;

  }

  #a{

   position: absolute;

   width: 50px;

   height: 50px;

   background-color: #f3e9e0;

   border-radius: 50%;

   left: 400px;

   top: 200px;

  }

  #a div{

   position: absolute;

   width: 50px;

   height: 50px;

   border-radius: 50%;

   transition: all 0.5s;

   left: 0px;

   top: 0px;

  }

  #a :nth-child(1){

   background-color: #c1d4ed;

  }

  #a :nth-child(2){

   background-color: #7d6e69;

  }

  #a :nth-child(3){

   background-color: #dad6d5;

  }

  #a :nth-child(4){

   background-color: #caaa9d;

  }

  #a :nth-child(5){

   background-color: #6bdeff;

  }

  #a:hover :nth-child(1){

   left: 150px;

   top: -150px;

  }

  #a:hover :nth-child(2){

   left: 150px;

   top: 150px;

  }

  #a:hover :nth-child(3){

   left: 300px;

   top: -150px;

  }

  #a:hover :nth-child(4){

   left: 300px;

   top: 150px;

  }

  #a:hover :nth-child(5){

   left: 450px;

   top: 0px;

  }

  /style

/head

body

div id = ‘a’

div/div

div/div

div/div

div/div

div/div

/div

/body

/html

鼠標伸到球上 自動擴散移動

怎樣實現用js的onclick事件控制css動畫播放

綁定事件函數就好

input type=”button” value=”開始” id=”play” onclick=”play()” /綁定onclick事件

script

點擊時候調用的函數

function play(){

這裏面寫你要寫的動畫

}

/script

如何用js控制css中的幀動畫

/持續設置圖片旋轉角度，使其顯示旋轉動畫

setInterval(function(){

$(“#donghua”).css({“position”:”relative”,”left”:-n+”px”,”background-position”:n+”px 0px”});

n=(n-777)?n-111:-111;

},300);

/script

怎麼用js觸發css3動畫

你用CSS3的方式預先寫好動畫樣式，不調用這個class,前端中設置鼠標經過增加一個class，這樣鼠標指向的時候就有CSS3的動畫，鼠標離開去除樣式動畫結束