1 reply [Last post]
Niona's picture
Last seen: 6 years 6 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.

gary.turner's picture
Last seen: 2 years 3 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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
For specifications and examples.

See this quick example:

<html lang="en">
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
      Test document
    <style type="text/css">
    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;}



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