Sat, 2017-02-11 14:45
Hello everybody!
I'm new in CSS3 transition/transform field. On W3School website there is a wide number of examples, so I use them to get start from 
My idea is to transform a square to a rectangle (with transition) and CSS could be something like that:
div {
width: 10px;
height: 10px;
background: red;
transition: width 5s;
}
div:hover {
width: 100px;
height: 10px;
background: red;
}
But I can't understand 
WHY transition: width 5s is written in div-part, not in div:hover-part? Div-part is like start-state and div:hover-part is like what should happen next. My logic says me: if you hover, then width should change, the transition should start 
. So I "would" like to write:
div {
width: 10px;
height: 10px;
background: red;
}
div:hover {
width: 100px;
height: 10px;
background: red;
transition: width 5s;
}
When I use W3School TryIt window both examples are working well. But is there any theory why transition row should be in div start-state not in div:hover state?
Any ideas are appriciated.
Niona
Mon, 2017-02-13 00:44
#1
Maybe a poor understanding on my part
I take it that the initial element needs to declare a transition property, else the will be none.
I would not recommend W3Schools due to their propensity to have errors and promote poor practices. Learn from HT MLDog.com instead.
See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
and
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
For specifications and examples.
See this quick example:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ html { padding: 0;} body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0;} p { font-size: 1em;} /* end boilerplate */ div { border: 1px solid black; letter-spacing: .3em; margin: 1.5em auto; text-align: center; transition: width, letter-spacing; transition-duration: 2s; width: 50px;} /* and the change */ div:hover { letter-spacing: 1.2em; /*transition-duration: 0.5s;*/ /*Uncomment the duration to set a different time duration to transition _to_ the :hover state*/ width: 150px;} /*]]>*/ </style> </head> <body> <div>test</div> </body> </html>
cheers,
gary