CODEWITHSUNDEEP
htmlcsscss-transitionstransition
g5wx
g5wx

Reputation: 720

CSS3 transition delay with easing

i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.

In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition.

Any help appriciated :)

Upvotes: 0

Views: 204

Answers (1)

Daniel Perván
Daniel Perván

Reputation: 1716

Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.

In the end, you never really tell the elements to actually animate their opacity.

By rewriting your code a bit, I came up with this which should work a bit better.

As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.

Upvotes: 2

Related Questions