Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Beating heart animation interfering with random background cycling javascript

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #33471
    FAII
    Member

    Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds.

    However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again.

    I’ve managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I’ve learned today through tinkering with the scripts, that if I remove the variable “infinite”, the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that.

    What I want is this:
    A heartbeat animation that’s infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects.

    The heartbeat CSS-script:
    }

    .heartbeat {
    width: 50px;
    -webkit-animation: beat 1.0s ease-out infinite normal;
    }

    @-webkit-keyframes beat {
    0% {
    -webkit-transform: scale(1.0) rotate(0deg);
    }
    65% {
    -webkit-transform: scale(1.1) rotate(0deg);
    }
    75% {
    -webkit-transform: scale(.9) rotate(0deg);
    }
    100% {
    -webkit-transform: scale(1.0) rotate(0deg);
    }
    }

    The background cycler (html-file):



    The background cycler (js-file):
    var WPNUM = 2;

    var WALLPATH = “Wallpapers/”;

    var IMGTYPE = “png”;

    var CHANGELENGTH = 0.1;

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.