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

http://jsfiddle.net/ow86d5vg/


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -