2

I have been playing around with transitions and animations, and I wanted to make the most of using hover with them.

I was wondering if it is possible to make animation happen after being hovered over, not necessarily while hovering over it. For example, if I wanted a picture to slide in and change opacity after the related paragraph is hovered, how would I get it to stay without keeping the mouse of the section?

My last question is if something similar to keyframes can be used with transitions. I prefer transitions because they transition back to the original state instead of snapping back.

I made a jsfiddle with some basic code examples, and I am wondering how to expand upon them. Hopefully the examples help clarify what I am trying to explain.

jsfiddle

Says I need code to link jsfiddle

They are very simple, the first is just an animation (left to right) that I want to remain after hovering once.

The second is a transition (left to right), and I am wondering if I can make an animation similar to the animation that follows it (left to right to left)

Sakvad
  • 63
  • 9
  • 1
    *Says I need code to link jsfiddle* - That means you need to post code and not format text as code :) Coming to the question, a combination of animation and transition doesn't work in WebKit browsers (and even in FF it has some problems). You can find some information about the reason in this answer - http://stackoverflow.com/questions/32142484/combination-of-animation-and-transition-not-working-properly/32142949#32142949. – Harry Apr 16 '16 at 04:07
  • If I cannot combine the two, is there a way to make animations return to the original state without just "bouncing" back? I skimmed what you linked, but I do not want to use jquery or javascript. – Sakvad Apr 16 '16 at 21:35

1 Answers1

0

I update the fiddle here

However, "left to right to left" can not accomplish through transition. Because transition only has start status and end status, it can not handle the middle status. Look here. https://developer.mozilla.org/en-US/docs/Web/CSS/transition

You can accomplish "left to right to left" through keyframes. For example.

    @keyframes slideRight {
     0% {
        margin-left: 0em;
      }
      50% {
        margin-left: 2em;
      }
      100% {
        margin-left: 0em
       }
    }
youngwind
  • 475
  • 4
  • 5
  • Thanks for the SlideRight code. I did not seem to update my fiddle correctly as I thought I posted something similar. Do you know if it is possible to make the hover state remain? – Sakvad Apr 16 '16 at 03:38
  • Just don't write animation style in :hover status, but another classname, such as animation-hover. When you mouseEnter the div, add the classname 'animation-hover' to it .That's it. – youngwind Apr 16 '16 at 03:51
  • Does this mean it is impossible to have the effect persist after being hovered over without using JavaScript? – Sakvad Apr 17 '16 at 23:34