js控制css動畫開始（css使用定義動畫）

本文目錄一覽：

• 1、怎樣實現用js的onclick事件控制css動畫播放
• 2、CSS3 Animation 控制元素在動畫的初始位置開始動畫
• 3、如何用js控制css中的幀動畫
• 4、JS 怎麼動態設置CSS3動畫的樣式
• 5、如何使用JavaScript控制CSS Animations和Transitions
• 6、怎麼用js觸發css3動畫

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

綁定事件函數就好

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

script

點擊時候調用的函數

function play(){

這裡面寫你要寫的動畫

}

/script

CSS3 Animation 控制元素在動畫的初始位置開始動畫

當我們給元素添加Animation後，動畫總是現在元素的初始位置顯示一下，然後再跳到動畫的起始位置播放，這樣的話會很難看。

解決方法：

使用animation-fill-mode:forwards屬性

forwards參數意思為 元素將在動畫延遲結束後 初始位置顯示在 動畫關鍵幀的最後一幀定義的位置

backwards參數意思為 元素將在動畫延遲結束後 初始位置顯示在 動畫關鍵幀的第一幀定義的位置

上邊樣式的將變現為，class為phone的元素會在加載完成後，從它的定義位置靠下5rem開始動畫。

js中賦值nimation-fill-mode:forwards的方法：

object .style.animationFillMode=none | forwards | backwards | both;

如何用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動畫的樣式

引入jquery

然後給你要設置動畫的對象增加或者刪除css3動畫的類就可以了。

如我這裡用colorchange這個漸變類在css裡面寫好動畫效果以後在js裡面給對象添加上就可以實現動畫了

!DOCTYPE html

html

head lang=”en”

    meta charset=”UTF-8″

    titleTest/title

    style type=”text/css”

        body{

            padding: 20px;

            background-color:#FFF;

        }

        .colorchange

        {

            animation:myfirst 5s;

            -moz-animation:myfirst 5s; /* Firefox */

            -webkit-animation:myfirst 5s; /* Safari and Chrome */

            -o-animation:myfirst 5s; /* Opera */

        }

        @keyframes myfirst

        {

            from {background:red;}

            to {background:yellow;}

        }

        @-moz-keyframes myfirst /* Firefox */

        {

            from {background:red;}

            to {background:yellow;}

        }

        @-webkit-keyframes myfirst /* Safari and Chrome */

        {

            from {background:red;}

            to {background:yellow;}

        }

        @-o-keyframes myfirst /* Opera */

        {

            from {background:red;}

            to {background:yellow;}

        }

        #main{

            width:100px;

            height:100px;

            background:red;

        }

        #cgbt{

            width: 100px;

            margin: 20px 0 0 0;

            text-align: center;

            cursor: pointer;

        }

        #cgbt:hover{

            background-color: #2D93CA;

        }

    /style

/head

body

div id=”main”

    我會變么？

/div

div id=”cgbt”

    點我讓上面的變顏色

/div

script src=”jquery-3.2.1.min.js” type=”application/javascript”/script

script

    $(document).ready(function(){

        $(“#cgbt”).click(function(){

            $(“#main”).attr(“class”,”colorchange”);

        });

    });

/script

/body

/html

如何使用JavaScript控制CSS Animations和Transitions

有時候WEB開發人員認為CSS的動畫比JavaScript的動畫更難理解。雖然CSS動畫有其局限性，但它的性能比大多數JavaScript庫更加高效，因為它可以藉助硬件加速啊！其效果絕對可以超出我們的預期。

CSS animations和transitions再加上點JavaScript就可以實現硬件加速動畫，而且其交互效果比大多數JavaScript庫更高效。

So，讓我們快點開始吧！小夥伴們都等不及了！

注意：Animations(動畫)和Transitions(過渡)是不同的

CSS Transitions(過渡)被應用於元素指定的屬性變化時，該屬性經過一段時間逐漸的過渡到最終需要的值；而CSS Animations(動畫)只是在應用時執行之前定義好的操作，它提供更細粒度的控制。

在這篇文章中，我們將分別針對上述內容進行講解。

控制CSS Transition(過渡)

在編程論壇中，關於transition(過渡)的觸發和暫停有無數的疑問。使用JavaScript可以很容易的解決這些疑問。

如何觸發元素的transiton(過渡)？切換元素的類名可以觸發該元素的transition(過渡)

如何暫停元素的transition(過渡)？ 在你想要暫停過渡點，用getComputedStyle和getPropertyValue獲取該元素相應的CSS屬性值，然後設置該元素的對應的CSS屬性等於你剛才獲取到的CSS屬性值。

以下是該方法的一個例子。

!DOCTYPE html

html

head

title操作transtition/title

style type=”text/css”

.box {

margin: 30px;

height: 50px;

width: 50px;

background-color: blue;

}

.box.horizTranslate {

-webkit-transition: 3s;

-moz-transition: 3s;

-ms-transition: 3s;

-o-transition: 3s;

transition: 3s;

margin-left: 50% !important;

}

/style

script type=”text/javascript” src=”js/jquery.js”/script

/head

body

h3Pure Javascript/h3

div class=’box’/div

button class=’toggleButton’ value=’play’Play/button

h3jQuery/h3

div class=’box’/div

button class=’toggleButton’ value=’play’Play/button

script type=”text/javascript”

var boxOne = document.getElementsByClassName(‘box’)[0],

boxTwo = $(“.box:eq(1)”);

document.getElementsByClassName(‘toggleButton’)[0].onclick = function(){

if(this.innerHTML === ‘Play’){

this.innerHTML = ‘Pause’;

boxOne.classList.add(‘horizTranslate’);

}else{

this.innerHTML = ‘Play’;

var computedStyle = window.getComputedStyle(boxOne),

marginLeft = computedStyle.getPropertyValue(“margin-left”);

boxOne.style.marginLeft = marginLeft;

boxOne.classList.remove(‘horizTranslate’);

}

}

$(‘.toggleButton:eq(1)’).on(‘click’,function(){

if($(this).html() === ‘Play’){

$(this).html(‘Pause’);

boxTwo.addClass(‘horizTranslate’);

}else{

$(this).html(‘Play’);

var computedStyle = boxTwo.css(‘margin-left’);

boxTwo.css(‘margin-left’,computedStyle);

boxTwo.removeClass(‘horizTranslate’);

}

});

/script

/body

/html

執行效果：

同樣的技術可以用在更高級的方法上。下面的例子也是通過改變類名來觸發元素的transition(過渡)，但這次可以跟蹤當前的縮放率。

!DOCTYPE html

html

head

title操作transtition/title

style type=”text/css”

.zoomPic {

margin: 30px;

width: 300px;

height: 180px;

background-color: blue;

background-image: url();

background-repeat:no-repeat;

background-position:50% 50%;

background-size: 300px 180px;

-webkit-transition: all 2.5s ease-in-out;

-moz-transition: all 2.5s ease-in-out;

-ms-transition: all 2.5s ease-in-out;

-o-transition: all 2.5s ease-in-out;

transition: all 2.5s ease-in-out;

}

.zoomPic.zoom {

background-size: 1200px 720px !important;

}

/style

script type=”text/javascript” src=”js/jquery.js”/script

/head

body

h3Pure Javascript/h3

div class=”zoomPic”/div

button class=’zoom’Zoom/button

button class=’pause’Pause/button

button class=’zoomout’Zoom Out/button

h3jQuery/h3

div class=’zoomPic’/div

button class=’zoom’Zoom/button

button class=’pause’Pause/button

button class=’zoomout’Zoom Out/button

script type=”text/javascript”

var zoomOne = document.getElementsByClassName(‘zoomPic’)[0],

zoomOneBgSize = window.getComputedStyle(zoomOne).getPropertyValue(‘background-size’),

zoomTwo = $(“.zoomPic:eq(1)”),

zoomTwoBgSize = zoomTwo.css(‘background-size’);

// zoomOne:zoom

document.getElementsByClassName(‘zoom’)[0].onclick = function(){

if(!zoomOne.classList.contains(‘zoom’)){

zoomOne.classList.add(‘zoom’);

}

}

// zoomOne:pause

document.getElementsByClassName(‘pause’)[0].onclick = function(){

var computedStyle = window.getComputedStyle(zoomOne),

backgroundSize = computedStyle.getPropertyValue(“background-size”);

zoomOne.style.backgroundSize = backgroundSize;

zoomOne.classList.remove(‘zoom’);

}

// zoomOne:zoomout

document.getElementsByClassName(‘zoomout’)[0].onclick = function(){

zoomOne.classList.remove(‘zoom’);

zoomOne.style.backgroundSize = zoomOneBgSize;

}

// zoomTwo:zoom

$(‘.zoom:eq(1)’).on(‘click’,function(){

if(!zoomTwo.hasClass(‘zoom’)){

zoomTwo.addClass(‘zoom’);

}

});

// zoomTwo:pause

$(‘.pause:eq(1)’).on(‘click’,function(){

var computedStyle = zoomTwo.css(‘background-size’);

zoomTwo.css(‘background-size’,computedStyle);

zoomTwo.removeClass(‘zoom’);

});

// zoomTwo:zoomout

$(‘.zoomout:eq(1)’).on(‘click’,function(){

zoomTwo.removeClass(‘zoom’);

zoomTwo.css(‘background-size’,zoomTwoBgSize);

});

/script

/body

/html

轉載僅供參考，版權屬於原作者。祝你愉快，滿意請採納哦

怎麼用js觸發css3動畫

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