本文目录一览：
- 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的动画，鼠标离开去除样式动画结束