html - CSS Selectors - Multiple animations on one trigger -
how can multiple divs transition/animate on 1 hover trigger?
see update here: http://jsfiddle.net/hecyn/9/ >> css-line:23 i'm trying here, .inner , .wrap2 rotate on 1 .wrap:hover. not working, when add "+" selector. how can right better.
primary question: how can write below:
#container:hover + #cube1 + #cube2 + #cube3 { background-color: yellow; }
second question: above ok, im kinda trying achieve via css:
#:hoveroversomething then{ thing; other thing; next thing; }
bear me, little new css animations... , net clouded , without specific simple information. cheers.
i think try keyframes animation: https://developer.mozilla.org/en-us/docs/web/css/@keyframes
something this:
.wrap:hover { animation: test-animation 2s linear; } @keyframes test-animation { //you can add many ranges 0% 100% 0% { opacity: 0; } 50% { transform: scale(1.5); } 100% { opacity: 1; } }
https://jsfiddle.net/malt4dda/
regarding question:
how can multiple divs transition/animate on 1 hover trigger?
your idea fine, there 1 mistake in code. should .wrap:hover .inner,.wrap:hover + .wrap2
instead of .wrap:hover .inner + .wrap2
Comments
Post a Comment