How to change the display mode along with rotation animation? - css

Question

In the following code, I want to have the square shadow appear and rotate at the same time, but the display does not change. Any help is very appreciated.
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>

Answer 1

It won't work like this because when you have it set to display:none; there's nothing to hover so the hover state never gets fired. You need to use only opacity to hide it rather than display:none;
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity:0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
opacity: 0.2;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>

Answer 2

You can't hover a non-displayed element. There are a few solutions here, just as making the shadow a child of the test div.
Or, using a + CSS selector. In either case, the hover listener is on the visible element:
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>

Answer 3

You can't animate "Display". If you want to fade in the box, have
display:block;
opacity:0;
and in your animations add
opacity:1;
this will fade in the box as it rotates.

Answer 4

You cannot hover an element not displayed like #shadow (with display:none), but you have to hover #test and apply the css rule to the sibiling next to #test, that is #shadow (using + selector)
#test:hover + #shadow
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow{
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>