Na FreeHostingu Endora běží desítky tisíc webů. Přidejte se ještě dnes!
Vytvořit web zdarmaNa FreeHostingu Endora běží desítky tisíc webů. Přidejte se ještě dnes!
Vytvořit web zdarma Transition
Provede animaci vlastnosti opacity v délce 1 vteřiny stylem ease-in-out, která začne 2 vteřiny po najetí myši.
.div1 {
width: 500px;
height: 100px;
background: lime;
transition: opacity 1s ease-in-out 2s ;
}
.div1:hover {
opacity:0;
}
...
<div class="div1"> </div>
Přidává do transformace přechodový efekt.
.div2 {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
.div2:hover {
width: 300px;
height: 300px;
transform: rotate(360deg);
}
...
<div class="div2"> </div>
Transition-delay
Po najetí myši na text po 1 vteřině zčervená.
#zpozdeni {
transition: color 3s;
transition-delay: 1s;
}
#zpozdeni:hover {
color:red ;
}
...
<p id="zpozdeni">Po najetí myši text po 1 vteřině zčervená. </p>
Transition-duration Transition-property
#trvani {
transition-duration :4s;
transition-property: background;
}
#trvani:hover {
background: red;
}
...
Transition-timing-function
.ease {
width: 50px;
height: 50px;
background: lime;
transition: width 5s;
}
#timing:hover {
width: 500px;
}
...
<div id=timing class="ease" style="transition-timing-function: ease;"> </div>