1 reply [Last post]
Niona
Niona's picture
Offline
newbie
Last seen: 2 years 42 weeks ago
Timezone: GMT+2
Joined: 2017-02-11
Posts: 1
Points: 2

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 Wink 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 Sad 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 Smile. 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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 43 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.