本文目录一览：

• 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的动画，鼠标离开去除样式动画结束