EntradaTransiciones CSS3. Transición suave de varias propiedades.
Explorador de Internet. Hasta ahora no soporta la transición de la propiedad.
Firefox 4 requiere consola -moz-.
Chrome y Safari requieren prefijo -Webkit.
Opera requiere el prefijo -o-.
¿Cómo funciona?
Las transiciones CSS3 son efectos que permiten que el artículo cambie suavemente un estilo a otro.
Para hacer esto, debes especificar dos cosas:
- Especifique la propiedad CSS a la que desea agregar un efecto.
- Determinar la duración del efecto.
EjemploEl efecto de transición para la propiedad de ancho, duración: 2 segundos:
|
Comentario: Si la propiedad de la duración no se especifica, la transición suave no sucede, porque el valor predeterminado es 0.
El efecto comenzará cuando la propiedad CSS especificada comience a cambiar. Generalmente el efecto de transición ( cambio suave Propiedades CSS) Lazo al momento en que el usuario mueve el mouse sobre el elemento:
EjemploEspecifique: Hover para artículos :
Comentario: Cuando el cursor del mouse deja el área del elemento, cambia suavemente a su estilo original. Varios cambiosPara agregar un efecto más de un estilo, especifique varias propiedades, separándolas con comas:
|
Fecha añadida: 2011-10-16
Propiedad transición. Se refiere a nuevas propiedades CSS3. Familiarizado con él más cerca.
Todos nos acostumbramos a que cuando flote el mouse, cambie el color del enlace. En este caso, el color cambia drásticamente, sin una transición sin problemas. Propiedad transición. Le permite agregar una pequeña animación cuando se cambia el color sin usar JavaScript.
La especificación de esta propiedad establece lo siguiente:
Las transiciones CSS permiten que los cambios de propiedad en los valores CSS se realicen sin problemas durante una duración específica.
En otras palabras, las transiciones CSS le permiten asignar cambios en las propiedades de CSS sin problemas y durante algún tiempo.
Aplicar propiedad transición. Es posible cualquier cosa: fondo, color, longitud, tamaño de fuente, etc. Estas son principalmente las propiedades que establecen el color o las propiedades que se pueden expresar en unidades de longitud (PX, EM, EX) o porcentaje. Como evento, también podemos usar Pseudoclass: enfoque y: activo.
Navegador
Inmediatamente diré sobre los navegadores - nuevo estándar aún no aceptado, por lo que este momento Es necesario usar prefijos -Webkit-, -Moz- y -O-. Parece que la propiedad es compatible. navegadores de cromo, Safari, Opera 10.5+, Firefox 4+. Nuestro "favorito" Internet Explorer como siempre no funciona, el usuario simplemente no verá ninguna animación.
En este artículo utilicé el prefijo. -Bebkit-Así que todos los ejemplos dados aquí trabajarán solo en Chrome y Safari.
Considere un ejemplo simple: agregue un enlace de fondo de transición suave
Para empezar, recordemos cómo se realiza el cambio habitual de la referencia de color cuando el mouse está flotando.
Ahora usamos la propiedad CSS. transición. Para un cambio suave del fondo con el enlace. Crea una nueva clase que sea idéntica a la clase. sencillo Y agregue algunas líneas nuevas:
A.cool (relleno: 5px 10px; Fondo: # 69F; Color: # 000; - Transición-Transición-Propiedad: Fondo; - Transición-transición-Duración: 0.5s; -Webkit-Transition-Función: Facilidad;) A.cool: Hover (Fondo: # 33F; Color: #FFF;)
Crea un par de enlaces de prueba más y mira el resultado:
¡Ahora nuestro fondo cambia suavemente el color para un medio tazón! Desde el ejemplo, puede ver que hemos agregado tres nuevas líneas con propiedades. -Webkit-Transition-Property, -Webkit-Transition-Duración, -Webkit-Transition-Función.
De hecho, se pueden combinar en una propiedad:
WebKit-Transition: Fondo 0.5s Facilidad;
También puede agregar un cambio de color de texto suave:
A.cool2 (relleno: 5px 10px; Fondo: # 69F; Color: # 000; -Webkit-Transition: Fondo 0.5s Facilidad, Color 1.0s Facilidad;) A.COOL2: Hover (Fondo: # 33F; Color: #fff ;)
Este código cuando flotando el mouse cambiará suavemente el color de fondo durante el hemissecond y el color de la fuente durante 1 segundo. Cheque:
Si utilizamos los mismos parámetros para la animación, puede usar la expresión: -Webkit-Transition: la facilidad de 0.5s 0.5s;
Ahora se aplicará el efecto de transición a todas las propiedades cambiantes con los mismos parámetros, 0.5 segundos, efecto de facilidad.
También puede agregar un retraso para efectuar retardo de transición.:
A.cool3 (relleno: 5px 10px; Fondo: # 69F; Color: # 000; -Webkit-Transition: Todos los 0.5s Facilidad; -Escualzo-Transición-retardo: 0.5s;) A.Cool3: Hover (Fondo: # 33F Color: #fff;)
Ahora la animación trabajará a través de medio segundo después de que el mouse esté guiado. Compruebe por si acaso:
Mesa de fondo
Para asimilar mejor material, llamo a su atención una pequeña tabla de referencia.
Propiedad de transición-propiedad a la que usted aplica animación. Prácticamente cualquier propiedad CSS: color, fondo, ancho, tamaño de fuente, etc. Duración de la transición Duración de la animación. Tiempo en segundos. Función temporal de transición FUNCIÓN TEMPORAL UTILIZADA PARA LA ANIMACIÓN: FAIL, LINEAJE, FASE-IN-OUT, FASE-IN, FASE-OUT, FASE-OUT-OUT-OUT-OUT-OUT-OUT-OUT-OUT-OUT-OUT-OUT-OUT-ANIMACIÓN DE LA ANIMACIÓN DE LA ANIMACIÓN DE LA ANIMACIÓN DE LA INTERRACIÓN DE LA TRANSICIÓN CUBICA-Bezier. Tiempo en segundos.
La propiedad de transición CSS es necesaria para instalar una transición de animación de un estado a otro. La animación funciona con pseudo-elementos: Hover y: activo, es decir. Cuando el objeto se está moviendo de un estado a otro.
Sintaxis de transición de CSS
transición: [Ninguno |] || || || ;
La sintaxis se ve bastante irregular, pero todo es simple. Veamos ejemplos simples a medida que funciona. Después de dos ejemplos, todos los de cada uno de los elementos de la sintaxis se desmontarán:
Ejemplos con la propiedad de transición.
Ejemplo 1. Animación en HTML a través de la transición.
Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:
Код transition: all 1s linear означает следующее:
Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .
Пример #2. Увеличение объекта в html без смещения других объектов
На странице преобразуется в следующее
Теперь объект увеличивается и не происходит смещения других объектов.
Рассмотрим детально какие значения может принимать каждый из параметров
Значения свойств transition
1. Параметр transition-property
Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения
- all - ко всему объекту (можно опустить, если задано время)
- color - к цвету текста
- background - к цвету фона объекта
- width , height - к изменению габаритов по ширине и высоте соответственно
- none - анимация отсутствует (по умолчанию стоит у каждого элемента)
Для включения нескольких свойств, их можно перечислить через запятую.
2. Параметр transition-duration
Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).
Например
Параметр transition-duration можно задавать отдельным свойством в CSS:
transition-duration : 1s ;
3. Параметр transition-timing-function
Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.
Синтаксис transition-timing-functiontransition-timing-function : value ;
Где value может принимать значения:
- ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
- ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
- ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
- step-start - мгновенный старт, равносильно параметру steps(1, start)
- step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
- cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
- steps(a,b) - изменение рывками
Например
4. Параметр transition-delay
Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)
Например
Пример #3. Разные задержки
Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.
На странице преобразуется в следующее
Пример сложной трансформации с задержками
БраузерыНе все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :
- -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
- -webkit-transform-origin - для Chrome, Safari, Android и iOS
- -o-transform-origin - для Opera до версии 12.10
- -moz-transform-origin - для Firefox до версии 16.0
Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:
document.getElementById("elementID").style.transition
CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс:hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.
Вот, как это прописывается:
Blok { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok:hover { background-color:#000000; color:#ffffff; }
А вот, как это выглядит:
Наведи на меня
Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:
Blok1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok1:hover { background-color:#000000; color:#ffffff; width:355px; }
Вот, как это будет выглядеть в данном случае:
Наведи на меня
Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition .
О свойстве transition
Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:
Div { transition:color 1s 1s linear; }
Вместо указанных значений естественно можно применить и другие. Большинство браузеров до сих пор не воспринимают данное свойство в его стандартном виде, поэтому необходимо использовать префиксы.
Div { transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; }
В примерах был указан короткий вариант записи, подробный имеет следующий вид:
Div { transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition-delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; }
В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.
Подробнее о transition-timing-function
Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:
- linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
- ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
- ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
- ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
- ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.
Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.
Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.
Примеры использования свойства transition
Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.
Primer_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; } .primer_1:hover { background-color:#000000; color:#ffffff; width:355px; }
Наведи на меня
В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:
Primer_1_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; } .primer_1_1:hover { background-color:#000000; color:#ffffff; width:355px; }
Наведи на меня
В данном случае все свойства меняли свои значения по очереди, начиная с цвета фона и заканчивая шириной. У каждого свойства была задана своя функция.
Пример 2.
С цветами и размерами разобрались. Теперь давайте сделаем исчезающий в движении блок.
Primer_2 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_2:hover { opacity:0; margin-left:50px; }
Наведи на меня
При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.
Primer_3 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz-transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; } .primer_3:hover { text-shadow:0 0 15px #ffffff; }
Наведи на меня
Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.
Primer_4 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition:-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; } .primer_4:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }
Наведи на меня
Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на , чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом:active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?
Primer_5 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_5:active { width:375px; height:85px; }
Нажми и держи
Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом:active.
Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!