wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Transition css generator: CSS Transition Generator | MakingCSS

alexxlab
No Comments

Содержание

CSS3 сейчас — transition / Хабр

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3…». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.


Пример: На вашем сайте прекрасно смотрится изменение цвета ссылки в меню при наведении мышкой. Цвет изменяется резко, без плавного перехода, но это никак не влияет на общий вид сайта, его юзабилити. Зато присутствие плавного перехода цвета может послужить именно той маленькой деталькой, которая добавит вашему сайту немного «жизни».

В данной статье мы рассмотрим CSS-свойство transition.

Все примеры приведены для движка webkit. Чуть ниже мы рассмотрим кроссбраузерность этих методов.

Transition

W3C даёт следующее определение transitions:

CSS Transitions allow property changes in CSS values to occur

smoothly over a specified duration.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Классическая реализация:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь добавим плавное изменение цвета шрифта:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease, color 0.3s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0. 3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на

-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наша анимация будет работать через полсекунды после наведения мышки.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Итоговая сводная таблица:





transition-propertyСвойство, к которому применяем анимациюПрактически любое свойство CSS: color, background, width, font-size и т.д.
transition-durationДлительность анимацииВремя в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-functionВременная функция, используемая для анимацииease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delayЗадержка анимацииВремя в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Браузеры

Chrome, Safari, Opera 10.5+, Firefox 4+
В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!

P.S. Спасибо lahmatiy за поправки в комментариях.

Создание анимации с помощью CSS3 генератора

<div>

    <h3>Пример — 1:</h3>

    <p>Привет transition</p>

</div>

.first p {

    transition-property: font-size;

    transition-duration: 500ms;

    transition-timing-function: ease-in;

    transition-delay: 100ms;

}

 

.first p:hover {

    color: red;

    font-size: 30px;

}

<div>

    <h3>Пример — 2:</h3>

    <p>Привет transition</p>

</div>

. second p {

    transition: color 1s ease-in 300ms;

}

 

.second p:hover {

    color: green;

    font-size: 30px;

}

.third p {

    transition: 250ms 250ms, font-size 500ms, color 1s ease-out 500ms;

}

 

.third p:hover {

    color: blue;

    font-size: 30px;

    background-color: red;

}

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+4.0+26.0+10.5+12.10+3.0+4.0+16.0+4.02.0+

CSS 1CSS 2CSS 2. 1CSS 3