Понимание анимации анимации CSS3, использование animate.css

CSS

Анимация CSS может заменить анимацию js, и она будет более плавной на мобильной стороне!
Ниже приведен рисунок орбит основных планет Солнечной системы, который можно использовать для самообучения!

Сначала нам нужно создать правило @keyframes

@keyframes name{
	from{width:1px}
	to{width:100px}
}
//或者使用百分比
@keyframes name{
	0%{width:1px}
	100{width:100px}
}

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

<div class="box1"></div>

.box1{
		width: 0px;
		height: 100px;
		background-color: #00FF7F;
		/* 引用 / 捆绑*/
		animation: first 2s;
	}
@keyframes first{
		0%{width:1px}
		100{width:100px}
	}

Изображение эффекта:

animation

Конечно, помимо изменения шириныwidthДругие свойства также могут быть изменены:height, позиционирование, перемещение, вращение, масштабирование и другие свойства CSS, которые вы можете придумать

Есть много свойств анимации css3, я думаю, что наиболее часто используемые из нихanimationсокращение для и время, необходимое для цикла анимацииanimation-duration;

Вот также небольшой пример:

<div class="horse"></div>

html,
body {
	height: 100%;
}

.horse {
	width: 128px;
	height: 128px;
	background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
	background-size: 100% 100%;

	transform: scaleX(-1);
	animation: bounce 0.1s infinite;
}

@keyframes runhorse {
	0% {
		transform: translate(0, 0);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	25% {
		transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	}

	50% {
		transform: translate(calc(100vw - 129px), calc(100vh - 200px));
		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	}

	75% {
		transform: translate(0, calc(100vh - 128px)) scaleX(-1);
	}

	100% {
		transform: translate(10px, 10px) translate3d(0, -4px, 0);
	}
}

body:hover .horse {
	animation: runhorse 2s linear infinite;
}

Изображение эффекта:

animate
Я не рассматривал направление головы Пони, только что написал эффект вращения. Многие свойства CSS могут быть использованы в анимационных эффектах. Вы можете обратиться к ~
Рекомендуемое использованиеanimate.css①Скачать animate.css

Официальный адрес:animate.css

②Или

войти напрямуюanimate.cssЗатем щелкните правой кнопкой мыши и сохраните как

③ Представьтесь напрямую через ссылку в теге head в верхней части страницы.

Базовый шаблон выглядит следующим образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>动画</title>
		<link rel="stylesheet" href="css/animate.css">
		<style>
			.demo1{
				font-size: 30px;
				font-weight: bold;
				color: #00008B;
			}
		</style>
	</head>
	<body>
		<div class="demo1 animated zoomIn infinite">
			Anyw3c
		</div>
	</body>
</html>

Эффект следующий:

animate

Далее небольшое резюме движения animate.css, хоть и не много, но его легко найти после классификации! /В порядке официального сайта/

① утчина

  • немного подпрыгнуть (подпрыгнуть; подпрыгнуть, подпрыгнуть; подпрыгнуть)
  • вспыхнуть дважды (сделать вспышку; отразить)
  • пульс медленно увеличивается, затем уменьшается (биение, пульс)
  • слегка встряхнуть влево и вправо несколько раз
  • Качели слегка трясутся по центру в верхней части середины
  • Тада очень непослушная маленькая встряска, PS: могу только описать это
  • качается дико, земля трясется

 ②Отскакивающие входы

  • Обучин центральный, оттуда, аккуратно дрожит несколько раз
  • Bounceindown приходит сразу, нет, слегка дрожит несколько раз
  • bounceInLeft тоже самое, но обязательно обратите внимание на заглавные буквы "профессиональная точка называется верблюжий кейс"
  • bounceInRighr
  • bounceInUp
  • bouncing Exits
  • bounceOut находится в центре, от присутствия к отсутствию, слегка встряхните несколько раз, чтобы исчезнуть
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRighr
  • bounceOutUp

③Продующие входы

  • FADEIN несколько отличается от отказов выше, в конце концов, он не встряхнет
  • FadeInDown постепенно опускается сверху вниз
  • FadeInDownBig постепенно опускается сверху, но немного отличается от приведенного выше: после добавления big начальная позиция приходит снаружи устройства.
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightNig
  • fadeInUp
  • FadeInUpBig на следующий большой тест сейчас
  • fading Exits
  • FadeOut — это противоположность FadeIn.
  • fadeOutDown постепенно исчезает сверху вниз, вы уверены, что не играете по-крупному?
  • FadeOutdownbig постепенно поднимался сверху, но появилась небольшая разница с вышеуказанным, а конечное положение большого было добавлено с устройства.
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightNig
  • fadeOutUp
  • Fadeoutupbig /Это наиболее часто используемые!/

 ④Флипперс

  • отразить преувеличенный эффект увеличения и уменьшения масштаба
  • flipInX разворачивается небольшими шагами вдоль центральной горизонтальной оси.
  • FlipInY слегка перевернут по центральной вертикальной оси
  • flipOutX по центральной горизонтальной оси инверсии малой амплитуды исчезают
  • FLIPOUTY перевернут в обратном направлении по центральной вертикальной оси.

 ⑤Скорость света

  • lightSpeedIn дословно означает, что выходит скорость света, не забудьте настроить скорость, что, я не сказал, как настроить скорость? Что ж, давайте сначала оставим дыру, а потом восполним ее.

  • lightSpeedOut скорость света исчезает

    ⑥Вращающиеся входы

  • rotateIn означает, что центральная точка поворачивается на 180 градусов, чтобы исчезнуть.

  • RotateindownLeft, это верно, это отказаться от верхнего левого угла как центр

  • rotateInDownRight - повернуть вниз с правым верхним углом в качестве центральной точки

  • rotateInUpLeft должен вращаться вверх с левым верхним углом в качестве центральной точки

  • rotateInUpRight должен вращаться вверх с правым верхним углом в качестве центральной точки

  • rotating Exits

  • rotateOut — поворот ровно на 180 градусов от центральной точки до затухания.

  • rotateOut DownLeft

  • rotateOut DownRight

  • rotateOut UpLeft

  • rotateOut UpRight

⑦Раздвижные входы

  • slideInUp Этот слайд кажется немного безвкусным.С Lightspeed и fadeIn выше вы увидите недостатки этого, диапазон движения слишком мал
  • slideInDown
  • slideInLeft
  • slideInRight
  • sliding Exits
  • slideOutUp по-прежнему плохо работает
  • slideOutDown
  • slideOutLeft
  • slideOutRight

 ⑧Увеличить входы

  • zoomIn Имейте в виду О, середина, эффект состоит в том, чтобы сделать все возможное
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoom Exits
  • имейте в виду zoomOut, центр пропадает, эффект лучше всего с zoomIn выше
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

⑨specials

  • петля висит, дрожит, падает
  • rollIn вращается слева
  • rollOut 向右侧旋转消失   到此呢，整个animate.css里的所有动作效果规整完毕。回上边去填坑！ !

Забудьте об этом, все равно заполните это здесь, если вы хотите использовать отложенную загрузку и контролировать время перехода, вы должны использовать jQuery, поэтому давайте найдем JQ, чтобы представить нижнюю часть страницы.

 Демонстрация выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/animate.css" />
<style type="text/css">
.test{
position: absolute;
width: 100px;
font-size: 50px;
top: 50px;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="animated rollIn test">test</div>
<script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
&emsp;&emsp;$('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
})
</script>
</body>
</html>

Используя jq для переопределения стиля css, этот метод на самом деле идет вразрез с первоначальным намерением анимации упростить код движения!

 参考文章：

электронный кот

Категории