js控制css动画开始（css使用定义动画）

发布时间：2023-12-08

js控制css动画开始（css使用定义动画）

更新：<time datetime="2022-11-12 09:14">2022-11-12 09:14</time>

本文目录一览：

1、怎样实现用js的onclick事件控制css动画播放
2、[CSS3 Animation 控制元素在动画的初始位置开始动画](#CSS3 Animation 控制元素在动画的初始位置开始动画)
3、如何用js控制css中的帧动画
4、[JS 怎么动态设置CSS3动画的样式](#JS 怎么动态设置CSS3动画的样式)
5、[如何使用JavaScript控制CSS Animations和Transitions](#如何使用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中赋值animation-fill-mode的方法：
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);

JS 怎么动态设置CSS3动画的样式

引入jquery 然后给你要设置动画的对象增加或者删除css3动画的类就可以了。 如我这里用 colorchange 这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</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库更高效。

注意：Animations(动画)和Transitions(过渡)是不同的 CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。 在这篇文章中，我们将分别针对上述内容进行讲解。

控制CSS Transition(过渡)

在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。 如何触发元素的transiton(过渡)？ 切换元素的类名可以触发该元素的transition(过渡) 如何暂停元素的transition(过渡)？ 在你想要暂停过渡点，用 getComputedStyle 和 getPropertyValue 获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。 以下是该方法的一个例子。

<!DOCTYPE html>
<html>
<head>
<title>操作transition</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>
<h3>Pure Javascript</h3>
<div class="box"></div>
<button class="toggleButton" value="play">Play</button>
<h3>jQuery</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>操作transition</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>
<h3>Pure Javascript</h3>
<div class="zoomPic"></div>
<button class="zoom">Zoom</button>
<button class="pause">Pause</button>
<button class="zoomout">Zoom Out</button>
<h3>jQuery</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的动画，鼠标离开去除样式动画结束

推荐文章