| Kosten | Воскресенье, 19 Августа 2018 | Сообщение 1 |
| Интересные анимации могут быть созданы с помощью CSS3 с помощью преобразований и переходов. Преобразования используются для изменения элемента из одного состояния в другое. Примерами могут быть вращающиеся, перемещающиеся, искажающие и масштабирующие элементы. Без перехода, преобразованный элемент резко изменился бы из одного состояния в другое. Чтобы предотвратить это, можно добавить переход, чтобы вы могли контролировать изменение, делая его более гладким.
Есть некоторые удивительные примеры трансформаций и переходов CSS, и, хотя вы можете быть потрясены ими, есть хороший шанс, что вы также перегружены и немного запуганы! Этот учебник вернет вас к самым основам. Шаг за шагом мы будем создавать некоторые фундаментальные переходные движения CSS3.
Предпочтительно использовать свойство transform(), так как оно обеспечивает более плавные переходы и делает ваши намерения более понятными при чтении кода.
Хотим анимировать мяч и сдвигать его вправо. Вместо того, чтобы изменять значение left, лучше использовать translateX():
CSS
Код .ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Не круто */
.ball.slide-out {
left: 500px;
}
/* Круто */
.ball.slide-out {
transform: translateX(450px);
}
Базовая анимация с ключевыми кадрами
Код <div class="container"> <div class="wave"></div> <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <h2>Симпатичная подводная лодка</h2> <p>Индикатор выполнения - отличный пример того, как безье может настроить время анимации. С преобразованиями, переходами и многими другими параметрами пользовательская анимация может быть легко создана. Надеемся, что эти основные примеры анимации CSS3 помогли вам увидеть, какие существуют другие возможности.</p> </div> </div>
CSS
Код @keyframes fadeInDown {
0% {
opacity: .8;
transform: none;
}
25% {
opacity: 1;
transform: translate(0, 15px);
}
50% {
opacity: 1;
transform: translate(0, 30px);
}
75% {
opacity: 1;
transform: translate(0, 15px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes fadeInDownText {
0% {
opacity: .8;
transform: none;
}
100% {
opacity: 1;
transform: translate(0, 35px);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.fadeInDownText {
-webkit-animation-name: fadeInDownText;
animation-name: fadeInDownText;
}
.container {
max-width: 60%;
margin: 0 auto;
}
.underwater {
position: relative;
min-height: 600px;
background-color: #4fc3da;
}
.move-down{
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 15;
animation-iteration-count: 15;
}
.text-delay {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
-webkit-animation-iteration-count: 15;
animation-iteration-count: 15;
}
.submarine {
height: 100px;
width: 100px;
margin: 0 auto;
background: url("http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/03/little-submarine.svg") no-repeat;
}
.moving-content {
font-family: 'Raleway', sans-serif;
width: 80%;
margin: 30px auto;
text-align: center;
color: white;
}
.moving-content h2 {
color: #4d275f;
}
.wave{
background-color: #afdee8;
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #4fc3da 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 80px 20px;
background-image:
radial-gradient(circle at 30px 15px, #4fc3da 12px, transparent 13px);
}
Демонстрация
Введение в преобразования CSS
Эффект CSS Transform заключается в изменении внешнего вида элемента в браузере посредством перевода, вращения или других средств. При определении в таблице стилей преобразования применяются при визуализации страницы, поэтому на самом деле вы не видите никаких анимации. Преобразования могут также применяться как наведение на мышь или аналогичный эффект, который вы можете увидеть в следующем разделе.
Предложение Apple для CSS Transformations требует возможности изменить перспективу и работать в трех измерениях, но это еще далеко. Даже продемонстрированные здесь функции не будут отображаться в других браузерах, пока они не будут одобрены органом по стандартизации, которые все еще борются с модулями CSS3.
HTML
Код <div class="aredsabukolag" style="transform: translate(3em,0);">ZORNET 1</div> <div class="aredsabukolag" style="transform: rotate(30deg); border-color: red;">ZORNET 2</div> <div class="aredsabukolag" style="transform: translate(-3em,1em);">ZORNET 3</div> <div class="aredsabukolag" style="transform: scale(2);">ZORNET 4</div> <div style="clear: left;"></div>
CSS
Код .aredsabukolag {
float: left;
margin: 4em 1em;
width: 100px;
height: 57px;
border: 2px solid #0c6d0c;
background-color: #f9f6f6;
line-height: 57px;
text-align: center;
}
Следует отметить, что текст по-прежнему можно выбрать в преобразованных элементах, даже когда они повернуты, и что масштабирование элемента влияет на свойства, включая ширину и размер шрифта, а не только размеры окна.
| | Страна: (RU) |
| |
