Click here to Skip to main content
15,867,771 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
As the title says I'm looking to animate 2 sets of key frames with 4 still imgs. The desired behavior; when hovered over open mid animation(2frames). text appears. When clicked on text disappears animation plays to completion(2frames). then it will navigate to a new page.

code can be viewed here; https://codepen.io/nessanotfound/pen/qBpjzWY

when adding 2 sets of keyframes neither set animated.So this current iteration, is meant to swap out the first background image on hover, and play the rest on mouse down/:active. This a as close as I've gotten and would appreciate any guidance. As I'm new to css animations, thank you in advance.

What I have tried:

<pre lang="CSS">
.gif {
  position: absolute;
  top: 1; left: 1; right: 1; bottom: 1;
  background-image: url(https://i.imgur.com/jPDpveE.png);
  animation: play 1.5s infinite steps(1);
  animation-play-state: paused;

}

.gif:hover {
    background-image: url(https://i.imgur.com/KFkJP0O.png);
}

.anim:active {
    animation-play-state:running;    
}

@keyframes play {
     0%   { background-image: url('https://i.imgur.com/jPDpveE.png'); }  
     25%  { background-image: url('https://i.imgur.com/VyP2MJV.png'); }
     50%  { background-image: url('https://i.imgur.com/to96jCW.png'); }
     75%  { background-image: url('https://i.imgur.com/to96jCW.png'); } 
     100%  { background-image: url('https://i.imgur.com/to96jCW.png'); }
}  
Posted
Updated 31-Mar-22 3:04am

1 solution

I'm not 100% sure you'll be able to achieve this through pure CSS. The :active selector only works while the mouse is held down on the element, once released it'll no longer be active and the image would reset back. You could do some magic with having a hidden checkbox, so when clicked it marks the checkbox as checked and then use the ~ selector to make the images transition.

I managed to achieve something similar using the checkbox approach: Edit fiddle - JSFiddle - Code Playground[^]

However you might have an easier time trying to come up with a generic solution in Javascript. You could use data- attributes to define the images, and a data-url to store the target address, then use JS to build the transitions.
 
Share this answer
 
Comments
nessNotFound 31-Mar-22 9:45am    
@Chris Copeland
Thank you so much! I realize this would likely be simpler with js(but tbh I'm not very strong in that language either), but I'm doing this in an effort to improve my CSS skills(in the journey to teach my self web development). I would like to use as little js as possible(until I have a better grasp on it) I have some inline js in my html for the delay so it can cycle through the frames before navigating to the link. But I hadn't considered CSS checkboxes, thank you again.
Chris Copeland 31-Mar-22 9:47am    
You're most welcome :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900