Эффект появления CSS

Эффекты появления

Вы можете сделать эффект появления для элементов страницы, блоков, фото, картинок и других частей макета, описаны способы использования эффектов появления при помощи свойств CSS.

Настройка и применение эффекта появления

Плавность появления

Плавность появления элементов достигается установленным временем в свойстве animation-duration и аналогу с префиксом -webkit-animation-duration, изменяющим состояние элемента из visibility: hidden; в visibility: visible;. Дополнительную роль играет свойство opacity:ЧИСЛО;, устанавливающее прозрачность элемента. После загрузки страницы элемент которму был добавлен class="opacity" будет невидимым, но за установленное время animation-duration: 1.7s;, методом указанным в свойстве animation-timing-function: ease-out; начинается действие анимации. Анимация с именем animation-name: opacity; используя правило @keyframes opacity как сценарий, который произойдёт на этапах в виде 10%{opacity:.1} процентного значения времени. В данном случае используется только свойство opacity добавляющее плавность появлению элемента при использовании CSS. В примере ниже анимация уже закончилась, можно перезагрузить анимацию без обновления страницы нажав на картинку 2 раза.

Эффект появления

<style>
.opacity {
visibility: hidden;
}
.opacity {
animation-name: myopacity;
-webkit-animation-name: myopacity; 
animation-duration: 1.7s; 
-webkit-animation-duration: 1.7s;
animation-timing-function: ease-out; 
-webkit-animation-timing-function: ease-out; 
visibility: visible !important; 
}
@keyframes myopacity{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}
@-webkit-keyframes myopacity{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}
</style>
<div class="opacity">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

Методы показа анимации

Можно изменить метод показа анимации в свойстве animation-timing-function, используя значения в виде базовых имён или координат Безье. Вы можете создать кривую координат воспользовавшись генератором координат Безье. Ниже показано влияние значений на поведение анимации.

animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(.17,.67,.86,.22);

Эффект появления при наведении

Изначально элементу установлено значение opacity:0.3;, то есть 30% прозрачности, при наведении постепенно прозрачность достигнет 100% за время установленное в значении animation-duration: 0.5s; и -webkit-animation-duration: 0.5s;, вы можете увеличить или уменьшить время появления в этих свойствах.

Эффект появления

<style>
.opacity-hover {
opacity:0.3;
}
.opacity-hover:hover {
animation-name: opacity-hover;
-webkit-animation-name: opacity-hover; 
animation-duration: 0.5s; 
-webkit-animation-duration: 0.5s;
animation-timing-function: linear; 
-webkit-animation-timing-function: linear;
opacity:1; 
}
@keyframes opacity-hover{0%{opacity:.3}20%{opacity:.4}40%{opacity:.5}60%{opacity:.6}80%{opacity:.7}90%{opacity:.9}100%{opacity:1}}
@-webkit-keyframes opacity-hover{0%{opacity:.3}20%{opacity:.4}40%{opacity:.5}60%{opacity:.6}80%{opacity:.7}90%{opacity:.9}100%{opacity:1}}
</style>
<div class="opacity-hover">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

Эффект появления масштабированием

Появление можно организовать используя свойство transform: scale(Значение); для масштабирования элемента в правиле @keyframes my-opacity-transform, на каждом процентном этапе времени увеличивается масштаб элемента, дополнительно добавлено свойство opacity, для увеличения эффектности появления. Для демонстрации примера нажмите на картинке 2 раза.

Эффект появления

<style>
.opacity-transform {
visibility: hidden;
}
.opacity-transform {
animation-name: my-opacity-transform;
-webkit-animation-name: my-opacity-transform; 
animation-duration: 0.7s; 
-webkit-animation-duration: 0.7s;
animation-timing-function: ease; 
-webkit-animation-timing-function: ease; 
visibility: visible !important; 
}
@keyframes my-opacity-transform{0%{transform:scale(0);opacity:0}10%{transform:scale(0.1);opacity:.1;transform:scale(0.1);opacity:.1}20%{transform:scale(0.2);opacity:.2}30%{transform:scale(0.3);opacity:.3}40%{transform:scale(0.4);opacity:.4}50%{transform:scale(0.5);opacity:.5}60%{transform:scale(0.6);opacity:.6}70%{transform:scale(0.7);opacity:.7}80%{transform:scale(0.8);opacity:.8}90%{transform:scale(0.9);opacity:.9}100%{transform:scale(1);opacity:1}}
@-webkit-keyframes my-opacity-transform{0%{transform:scale(0);opacity:0}10%{transform:scale(0.1);opacity:.1}20%{transform:scale(0.2);opacity:.2}30%{transform:scale(0.3);opacity:.3}40%{transform:scale(0.4);opacity:.4}50%{transform:scale(0.5);opacity:.5}60%{transform:scale(0.6);opacity:.6}70%{transform:scale(0.7);opacity:.7}80%{transform:scale(0.8);opacity:.8}90%{transform:scale(0.9);opacity:.9}100%{transform:scale(1);opacity:1}}
</style>
<div class="opacity-transform">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

До начала действия анимации, элемент которому присвоено значение свойства visibility: hidden; будет невидимым, но занимаемое им место будет оставлено за ним.

Демо эффектов появления

В демо использованы варианты из примеров, Вы можете внести свои изменения в демонстрируемый код.


Рейтинг: 4.5/5 из 24



Добавлено Автор Ник Источник Просмотров Комментариев Теги
22-12-2014 Михаил Меренков aTmpl © 7604 0