Comments on: transition

By: Geoff Graham

Geoff Graham — Tue, 08 Nov 2022 17:37:39 +0000

In reply to D7460N. Hey! Here's a hover transition between two colors:

.thing {
  --bg-color: rebeccapurple;
  background-color: var(--bg-color);
  transition: background-color .25s ease-in;
}
.thing:hover {
  --bg-color: aqua;
}

By: D7460N

D7460N — Tue, 08 Nov 2022 17:21:03 +0000

Would you please give a best-practices example for transitioning between two background-color states using CSS variables?

Thank you!

By: pd

pd — Sun, 05 Jun 2022 03:24:03 +0000

A list of properties that explicity cannot be animated would be great (somewhere, not necessarily on 'Tricks). Anyone successfully animated an img element from

position:unset;
 display:none;

position:absolute; 
 display:block;

along with different top, right values to get the img to actually move? Struggling with that myself. position is not included on the MDN list of properties that can be animated, however right, left, top, bottom are listed! sigh

By: Esu Gabriel

Esu Gabriel — Mon, 23 Sep 2019 10:48:22 +0000

Amazing, this explained all.

By: emmanuel monle

emmanuel monle — Tue, 09 Jul 2019 12:37:29 +0000

aha! the ‘all’ value of transition is now understood. thanks.

By: Lucy Pacius

Lucy Pacius — Wed, 03 Apr 2019 21:57:48 +0000

List of animatable properties

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

By: Chirag

Chirag — Fri, 29 Mar 2019 10:07:35 +0000

Prefixes -webkit, -moz, -o, is required?

-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;

By: starsofchacne

starsofchacne — Fri, 27 Jul 2018 18:16:35 +0000

hi.
i was wondering is there a way to use :
.finger3:hover {
height: 200px;
transition: 1s ease-in-out;

}
in only one direction for ex just upward, so the bottom stay still and transition happen to the top of the element.

By: Zait

Zait — Thu, 26 Oct 2017 03:28:28 +0000

Hi all. Anybody know what is the default time of transition?
Or default time of responding on hover? Because a on my page won’t respond on quick moving mouse. The question is how long mouse should hover before onhover fires?

By: arzoo

arzoo — Tue, 16 Aug 2016 12:18:22 +0000

body {
font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
font-size: 18px;
/* line-height:22px;*/
}
div {
display:block;
}
h2 {
color:blue;
text-align:center;
}
header img {
float: left;
clear:right;
margin-bottom:.5%;
margin-left:20px;
margin-top:18px;
margin-right:20px;
}
header h4 {
font-size:30px;
float:right;
clear:left;
font-family:verdana;
color:blue;
clear:right;
margin-top:8px;
margin-right:2%;
}
header ul {
float:right;
clear:left;
list-style-type:none;
padding:0;
margin:0;
margin-top:-3%;
margin-right:2%;
}
header ul li a {
display: block;
padding: 0;
}
header ul li {
float:left;
border: 2px solid #ffffff;
border-radius:.4em;
margin: .5em;
}
#section {
margin-left:10%;
margin-top:2%;
text-align:center;
}
#main {
margin-left:3%;
float:left;
clear:right;
width:20%;
text-align:center;
}

#main1 {
      margin-left:12%;
      float:left;
      clear:right;
      width:20%;
      text-align:center;
      }
#main2 {
      margin-left:12%;
      float:left;
      clear:right;
      width:20%;
      text-align:center;
      }

#container {
           height:200px;
           width:200px;
           clear:right;
           float:left;
           margin-left:10%;
           margin-right:10%;
           margin-top:1.5%;
            }
#main:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);

                  }
#main1:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  -ms-transform:all 1s ease-in-out;

                  }
#main2:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  transform:all 1s ease-in-out;

                  }
.circle {
        /*-webkit-border-radius:50%;*/
        border-radius:50%;
        height:150px;
        width:150px;
            }
#content {
      margin-right:10%;
      /*margin-left:10%;*/
      margin-top:1%;
      text-align:left;
         }
#content:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  -ms-transform:all 1s ease-in-out;

                  }
#content1 {
      margin-right:10%;
      margin-top:1%;
      margin-left:10%;
      text-align:right;
         }

#content1:hover img {
                -webkit-transition:all 1s linear;
                  -moz-transition: all 2s linear;
                   -webkit-transform:scale(1.4);
                  transition:all 1s linear;
                  -ms-transform:all 1s linear;
                  }
#container1 {
           height:200px;
           width:200px;
           clear:left;
           float:right;
           margin-left:10%;
           margin-right:10%;
           margin-top:1.5%; 

           }

#section1 {
            margin-left:10%
            margin-right:10%;
            }
#clear {
        clear:both;
        }
#header {
    position:fixed;
    width:100%;
    padding:0px;
    background-color:#c0c0c0;
    opacity:.4;
    margin:0;
        }
p {
    font-size:22px;
    }
a {
      text-decoration:none;
      }
footer {
        margin-left:5%;
        margin-right:25%;
        font-size:20px;
        }
table {
      text-transform:uppercase;
      margin-left:20%;
      }


@media (min-width:300px)
    {
    body {
        width:99%;
        }
    }

in this after transition ends it jumps back can i end it slowly???

By: Simphiwe

Simphiwe — Thu, 07 Jul 2016 12:45:56 +0000

Great post!
Was having difficulties trying to animate “background-color”.
Aftering coming here and changed to just “background” and it worked!!

By: Dinika

Dinika — Tue, 05 Jul 2016 14:30:32 +0000

This tutorial actually explained transitions better than w3schools and most of the tutorials out there that I visited to understand this concept.

By: Seb

Seb — Mon, 04 Jul 2016 12:17:12 +0000

What’s the point of this transition effect if it doesn’t work on iOs ?

By: Shubham Dubey

Shubham Dubey — Mon, 02 May 2016 13:36:51 +0000

In reply to Nived Kannada.

yes You can Do That
CSS
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
HTML

TEXT

By: Jesus

Jesus — Tue, 22 Mar 2016 21:16:13 +0000

Nice tutorial as usual, but I wanted to let you know that the red/green transition is not the best color choice. As you probably know red/green color blindness is quite common, and I personally can’t see any change in color at all.