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

Home Forums CSS Animations, even paused, block transitions

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #192985

    Hi guys,
    my problem, I guess, is of understanding how CSS animations and CSS transitions (can, or whether they) work together:

    I’m trying to create sort of a standard “engine” for showing several images is the same position on a webpage (one over the other) using various kinds of transitions: say, simple fading from one another, or sliding laterally, or rotating one while the other comes entering from the sides, etc. I have already all of these done, they work separately, no problem. I’ve set up animations so that they change after 3 seconds, using keyframes with time divisions of the type 100%/(n*t) (where n is the no. of images and t the time of each).

    But I’d like to do something more sophisticated: the animation operating these transitions should go on only as long as the user doesn’t hover the cursor over the image(s); when she does, the animation (the transitions between one photo to the next) should STOP (I did this using *-animation-play-state: paused) AND buttons should appear of the type REWIND and FORWARD (and one to switch between TYPES of transitions): so that the viewer could change manually between images, with a sliding transition, AND change the TYPE of transition that operates when the cursor isn’t hovering over them. (I know, guess I’m trying to do a lot..)

    I endeavored to program these, for when the animation is paused (when the cursor is hovering on the image(s)) using normal CSS transitions and hidden <inputs id=”..”> of type radio in the html (I’m trying to implement these only on CSS, no Javascript or its libraries), but it seems that when there are animations already set up, TIED UP to the HTML elements (the &lt;li&gt; items which are the images), other ordinary transitions on the same HTML elements simply DO NOT WORK.

    I guess I should learn more first about how CSS actually works before trying to do very complicated things like this, but I’d appreciate any pointers of sample code that do anything remotely similar to this, I guess it’s perfectly possible to do, I’m only not sure that you can have this kind of “several different types of transitions” working together just by switching a button on the page.



    It’s not entirely clear to me what you are trying to do but it seems like a lot of unnecessary effort to create something that is best left to Javascript.

    That being said, we can’t comment on Code we haven’t seen.

    A reduced case in Codepen with a more precise description of what you are trying to do would be more helpful.

    …but I really to think you are trying to force HTML & CSS to do the job that JS was written for.

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