在JavaScript中触发CSS动画

时间:2017-06-30 12:34:38

标签: javascript html css html5 css-animations

我不知道如何使用JQuery,所以我需要一个只能使用JavaScript触发动画的方法。 当用户滚动页面时,我需要调用/触发CSS Animation。 请帮我解决这个问题。

<html>

<head>
    <style>

        *
        {
            margin:0px;
        }
        #logo
        {
            position:fixed;
            top:200px;
            height:200px;
            width:1000px;
            left:5%;
            z-index:4; 


            opacity:0.8;
        }
        #earthlogo
        {
            position: fixed;
            top:200px;
            height:120px;
            align-self: center;
            left:5%; 
            margin-left: 870px;
            margin-top: 60px;
            z-index:4;


            opacity: 0.9;
        }
         @keyframes anim
        {
            50%
            {
                filter:blur(10px);
                transform: rotate(-15deg);
                box-shadow:0px 0px 10px 3px;
            }
            100%
            {
                height:100px;
                width:500px;
                left:10px;
                top:10px;
                box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
                background-color: rgba(0, 0, 1, 0.3);
                opacity: 0.7;
            }
        }

        @keyframes anim2
        {
                 50%
            {
                filter:blur(40px);
                transform: rotate(-15deg);
            }
            100%
            {
                height:60px;
                width:60px;
                left:10px;
                top:10px;
                margin-left: 435px;
                margin-top: 30px;
                opacity: 0.8;
            }
        }
        body
        {
            height: 2000px;
        }
        #backstar
        {
            position:fixed;
            width: 100%;
            z-index: 1;
        }
        #earth
        {
            position: absolute;
            width:100%;
            z-index: 2;
            top: 300px;
        }
    </style>
    <script>
        function start()
        {
            document.getElementById('logo').style.animation = "anim 2s 2s forward";
            document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
        }

</head>

<body>

    <img src="logo.png" id="logo" onclick="start();">
    <img src="earthlogo.gif" id="earthlogo" onscroll="start();">
    <img src="earth.png" id="earth">
    <img src="stars.jpg" id="backstar">

</body>

8 个答案:

答案 0 :(得分:8)

触发CSS动画的最简单方法是添加或删除类 - 如何使用纯Javascript执行此操作,您可以在此处阅读:

How do I add a class to a given element?

如果您使用jQuery(在基本用法中应该很容易学习),只需使用addClass / removeClass即可。

然后你需要做的就是设置一个到这个给定元素的过渡:

.el {
width:10px;
transition: all 2s;
}

如果元素有一个类,则更改其状态:

.el.addedclass {
width:20px;
}

注意:此示例处于转换状态。但是对于动画来说它是一样的:只需在有一个类的元素上添加动画。

类似的问题:Trigger a CSS keyframe animation via scroll

答案 1 :(得分:3)

这是使用香草JavaScript更改/触发与HTML元素关联的动画的方法。

首先,您可以使用CSS定义动画。

@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }

然后,您使用JavaScript在动画之间进行切换。

document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";

注意:“ yourElement”是您希望的目标HTML元素 动画。

例如:<div id="yourElement"> ... </div>

答案 2 :(得分:2)

您可以使用CSS隐藏图像/动画,并在用户滚动时显示。这可以这样工作:

CSS:

div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}

#demo{
    display: none;
}

HTML:

<div id="myDIV"> </div>

<div id="demo">
     <img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>

你的javascript只需要包含一个eventListener来调用触发动画显示的函数。

JS:

document.getElementById("myDIV").addEventListener("scroll", start);

function start() {
    document.getElementById('demo').style.display='block';
}

答案 3 :(得分:0)

这是主要代码:

HTML:

<img id="myImg">

CSS:

#myImg {
    //properties
    animation: animate 2s linear infinite //infinite is important!
}
@keyframes animate {
    //animation base
}

JS:

document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
    document.getElementById("myImg").style.webkitAnimationPlayState = "running";
    setTimeout(function() {
        document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
    }, 2000);
});

答案 4 :(得分:0)

如果您想要动画,我建议您创建一个CSS类,并在条件条件JS上进行切换: CSS

.animation {
 animation: anim 2s ease infinite;
 transition: .2s
}

JS

// Select your Element

$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
 $element.classList.toggle("animation")
})

答案 5 :(得分:0)

我有类似的问题。 最好的答案对我来说不起作用,但是当我加上延迟后,它就起作用了。 以下是我的解决方法。

CSS

.circle_ani1,
.circle_ani2 {
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.circle_ani1 {
    animation-name: circle1;
}

.circle_ani2 {
    animation-name: circle2;
}

JS

let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() {
    temp_circle1.addClass('circle_ani1');
    temp_circle2.addClass('circle_ani2');
}, 50);

答案 6 :(得分:0)

在函数中无法添加和删除动画类。延迟简直是微不足道。根据{{​​3}}的建议,您可以请求浏览器进行重排,然后添加类。在这种情况下,延迟不是问题。因此,您可以使用以下代码:

element.classList.remove("animation")
element.ofsettWidth
element.classList.add("animation")

最好的是,它无处不在。所有的功劳都归功于这篇文章。

答案 7 :(得分:-1)

document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");