Статьи

Использование CSS3 Transitions для создания богатых эффектов

Ноябрь 13, 2017

Были дискуссии о том, чтобы позволить CSS помогать разработчикам создавать плавные переходы свойств CSS для элементов, и это было указано в CSS3 в модуле переходов CSS W3C, уровень 3 . Здесь я собираюсь показать вам, как реализовать это в Firefox, Google Chrome, Safari & Opera.

Основы

Основы опираются на несколько свойств CSS:


переход-недвижимость

Какое свойство CSS для анимации, например, background-color.

Продолжительность перехода

Продолжительность перехода, указанная в секундах, например, 2 с

Переход задержки

Задержка перед началом перехода, указывается в секундах, например, 1 с

переходное время функция

Функция, которую вы хотите использовать для появления / облегчения перехода. Предлагаются пять предопределенных значений: легкость (значение по умолчанию), линейная, легкость входа, легкость выхода и легкость входа. Вы также можете использовать Cubic-Bezier и определить его значения, такие как Cubic-Bezier (0.2, 0.4, 0.7, 0.8)

Первый простой пример

Итак, давайте создадим элемент с примененным к нему определенным переходом CSS, а затем используем псевдокласс: hover, чтобы изменить одно из свойств CSS, для которого мы хотим выполнить переход. Здесь у нас будет переход к непрозрачности элемента, переходящий от значения 0,3 к 1,0 после 1 секунды наведения:

<style>
	#hello {
		opacity: 0.3;
		/* Firefox */
		-moz-transition-property: opacity;
		-moz-transition-duration: 2s;
		-moz-transition-delay: 1s;
		/* WebKit */
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 2s;
		-webkit-transition-delay: 1s;
		/* Opera */
		-o-transition-property: opacity;
		-o-transition-duration: 2s;
		-o-transition-delay: 1s;
		/* Standard */
		transition-property: opacity;
		transition-duration: 2s;
		transition-delay: 1s;
	}

	#hello:hover {
		opacity: 1;
	}
</style>

<p id="hello">Hello, CSS lover!</p>

Обратите внимание на синтаксис с различными префиксами веб-браузера, чтобы он работал во всех из них. На момент написания статьи ни один из них не поддерживал его без префикса, но вы все равно должны иметь его для дальнейшего использования.

Использование сокращенного синтаксиса

Как и в большинстве CSS-свойств, CSS Transitions предлагает также сокращенный синтаксис. CSS для приведенного выше примера с сокращенным синтаксисом будет выглядеть следующим образом:

<style>
	/* Shorthand version */
	#hello {
		opacity: 0.3;
		/* Firefox */
		-moz-transition: opacity 2s ease 1s;
		/* WebKit */
		-webkit-transition: opacity 2s ease 1s;
		/* Opera */
		-o-transition: opacity 2s ease 1s;
		/* Standard */
		transition: opacity 2s ease 1s;
	}
</style>

Указание нескольких CSS-переходов

Для CSS-перехода очень просто использовать несколько параметров перехода, просто укажите каждый разделенный запятыми. В этом примере будут изменены свойства opacity и height:

<style>
	/* Shorthand version */
	#hello {
		height: 20px;
		opacity: 0.3;
		/* Firefox */
		-moz-transition: height 1s ease-out, opacity 1s ease;
		/* WebKit */
		-webkit-transition: height 1s ease-out, opacity 1s ease;
		/* Opera */
		-o-transition: height 1s ease-out, opacity 1s ease;
		/* Standard */
		transition: height 1s ease-out, opacity 1s ease;
	}

	#hello:hover {
		height: 40px;
		opacity: 1;
	}
</style>

Вы можете увидеть этот пример вживую в примере CSS3 Transitions .

Использование CSS-переходов и CSS-преобразований

CSS Transforms предлагает вам возможность масштабировать, вращать, перемещать и наклонять элемент с помощью CSS. Теперь мы можем объединить это с CSS-переходами, чтобы создать хороший пример, который будет масштабировать и поворачивать элемент при наведении (он использует ключевое слово all для значения свойства перехода, которое в настоящее время недоступно в Firefox):

<style>
	/* Shorthand version */
	/* Shorthand version */
	.menu-item {
		opacity: 0.3;

		/* Firefox */
		-moz-transition: all 1s ease;
		/* WebKit */
		-webkit-transition: all 1s ease;
		/* Opera */
		-o-transition: all 1s ease;
		/* Standard */
		transition: all 1s ease;
	}

	.menu-item:hover {
		opacity: 1;

		/* Firefox */
		-moz-transform: scale(2) rotate(30deg) translate(50px);
		/* WebKit */
		-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
		/* Opera */
		-o-transform: scale(2) rotate(30deg) translate(50px);
		/* Standard */
		transform: scale(2) rotate(30deg) translate(50px);
	}
</style>

<a href="/" class="menu-item">Menu item 1</a>
<a href="/" class="menu-item">Menu item 2</a>
<a href="/" class="menu-item">Menu item 3</a>

Поддержка веб-браузера

CSS-переходы работают в следующих веб-браузерах:

  • Firefox 3.7 (ожидается весна / лето — ночные сборки доступны по адресу http://nightly.mozilla.org/ )
  • Google Chrome 4.0+
  • Safari 3.1+
  • Опера 10.5+

Не доступно ни в одной версии Internet Explorer, и пока нет указаний на то, что это будет в IE9.

мысли

После тестирования у меня было несколько мыслей:

  • Firefox не поддерживает опцию all, а также работает немного неаккуратно (проверьте демо на вращение, и вы увидите).
  • Веб-браузеры на базе WebKit (Safari и Google Chrome) предлагают наиболее плавную анимацию.

34
Share: