Настройка и применение эффекта появления
Плавность появления
Плавность появления элементов достигается установленным временем в свойстве 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, используя значения в виде базовых имён или координат Безье. Вы можете создать кривую координат воспользовавшись генератором координат Безье. Ниже показано влияние значений на поведение анимации.
Эффект появления при наведении
Изначально элементу установлено значение 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;будет невидимым, но занимаемое им место будет оставлено за ним.
Демо эффектов появления
В демо использованы варианты из примеров, Вы можете внести свои изменения в демонстрируемый код.