Xitrus está alojado en:
- /* Parámetro estándar */
- transition:
-
- /* Parámetros según navegador */
- -webkit-transition:/* Chrome y Safari */
- -moz-transition:/* Mozilla */
- -o-transition:/* Opera */
- /* Estilo de un DIV con la clase TRA */
- .TRA{
- width:100px;
- height:100px;
- background:#099;
- }
-
- /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
- .TRA:hover{
- width:200px;
- height:200px;
- background:#990;
- }
- transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo];
Propiedades: En este parámetro establecemos que propiedad queremos que modifique, como width, height... pero solo podemos poner una, por eso se puede usar la la propiedad "all", que sirve para seleccionar todas y se recomienda usarla preferentemente. Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s". Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media.Retardo: En este parámetro podemos establecer el tiempo que tarda en empezar la transición, en segundos.
- <div class="TRA_CONT">
- <div> <!-- Este DIV es el que se mueve -->
- </div>
- </div>
- /* Este estilo es el del DIV que esta dentro de div.TRA_CONT */
- .TRA_CONT div{
- width:10%;
- height:80px;
- margin-left:0%;
- background:#0F0;
- -webkit-transition:all 1s ease;
- -moz-transition:all 1s ease;
- -o-transition:all 1s ease;
- transition:all 1s ease;
- }
-
- /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
- .TRA_CONT:hover div{
- width:20%;
- margin-left:80%;
- background:#F00;
- }
transition-property: Este parámetro sirve para establecer los parámetros que serán afectados por la transición, es decir, si solo queremos que se cambie el width y el margin debemos de establecer en su contenido "width, margin", separando con comas si existe mas de un parámetro que va a ser afectado. transition-duration: Estableciendo este parámetro podemos cambiar individualmente el tiempo de la transición, estableciéndolo en segundos (por ejemplo 0.5s o 2s). transition-timing-function: Con este parámetro establecemos la curva de velocidad, pudiendo elegir entre varios preestablecidos (lineal,ease,ease-in,ease-out...). transition-delay: Con este parámetro establecemos el retardo con segundos, por ejemplo, si queremos que empiece medio segundo tarde establecemos 0.5s.
Los botones con los eventos
- <input type="button" onclick="document.getElementById('cuadro_tra').style.width='20%'" value="20%">
- <input type="button" onclick="document.getElementById('cuadro_tra').style.width='40%'" value="40%">
- <input type="button" onclick="document.getElementById('cuadro_tra').style.width='60%'" value="60%">
La etiqueta DIV que cambia de tamaño
- <div id="cuadro_tra"></div>
- #cuadro_tra{
- width:20%;
- -webkit-transition:all 1s ease;
- -moz-transition:all 1s ease;
- -o-transition:all 1s ease;
- transition:all 1s ease;
- }
- <div class="MENU_pestañas">
- <li>Inicio</li>
- <li>CSS</li>
- <li>JavaScript</li>
- <li>PHP</li>
- </div>
- .MENU_pestañas li{
- position:relative;
- float:left;
- list-style:none;
- width:140px;
- height:26px;
- padding-top:15px;
- text-align:center;
- background:#999;
- color:#FFF;
- border:1px solid #555;
- font-weight:bold;
- text-shadow:1px 1px 0px #000;
- border-radius:10px 10px 0px 0px;
- -webkit-border-radius:10px 10px 0px 0px;
- -moz-border-radius:10px 10px 0px 0px;
- -webkit-transition:all 1s ease 1s;
- -moz-transition:all 1s ease 1s;
- -o-transition:all 1s ease 1s;
- transition:all 1s ease 1s;
- }
-
- .MENU_pestañas li:hover{
- background:#9A44A6;
- border-bottom-color:transparent;
- z-index:2;
- box-shadow:2px -2px 4px rgba(0,0,0,0.4);
- -webkit-transition:all 1s ease;
- -moz-transition:all 1s ease;
- -o-transition:all 1s ease;
- transition:all 1s ease;
- }
Xitrus está alojado en: