Анимация появления попапа css

Содержание

ugurozdes / css3-animation-effects-for-magnific-popup.markdown
Анимируй это! Анимация всплывающих окон используя только css
Начало:
Демо анимации всплывающей формы входа и регистрации

ugurozdes / css3-animation-effects-for-magnific-popup.markdown

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// Inline popups

$ ( ‘#inline-popups’ ) . magnificPopup (

delegate : ‘a’ ,

removalDelay : 500 , //delay removal by X to allow out-animation

callbacks :

beforeOpen : function ( )

this . st . mainClass = this . st . el . attr ( ‘data-effect’ ) ;

> ,

midClick : true // allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source.

> ) ;

// Image popups

$ ( ‘#image-popups’ ) . magnificPopup (

delegate : ‘a’ ,

type : ‘image’ ,

removalDelay : 500 , //delay removal by X to allow out-animation

callbacks :

beforeOpen : function ( )

// just a hack that adds mfp-anim class to markup

this . st . image . markup = this . st . image . markup . replace ( ‘mfp-figure’ , ‘mfp-figure mfp-with-anim’ ) ;

this . st . mainClass = this . st . el . attr ( ‘data-effect’ ) ;

> ,

closeOnContentClick : true ,

midClick : true // allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source.

> ) ;

// Hinge effect popup

$ ( ‘a.hinge’ ) . magnificPopup (

mainClass : ‘mfp-with-fade’ ,

removalDelay : 1000 , //delay removal by X to allow out-animation

callbacks :

beforeClose : function ( )

this . content . addClass ( ‘hinge’ ) ;

> ,

close : function ( )

this . content . removeClass ( ‘hinge’ ) ;

> ,

midClick : true

> ) ;

@import » compass/css3 » ;

html , body

/* text-based popup styling */

.white-popup

position : relative ;

background : #FFF ;

padding : 25 px ;

width : auto ;

max-width : 400 px ;

margin : 0 auto ;

====== Zoom effect ======

.mfp-zoom-in

/* start state */

.mfp-with-anim

opacity : 0 ;

transition : all 0.2 s ease-in-out ;

transform : scale ( 0.8 );

& .mfp-bg

opacity : 0 ;

transition : all 0.3 s ease-out ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : scale ( 1 );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : scale ( 0.8 );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== Newspaper effect ======

.mfp-newspaper

/* start state */

.mfp-with-anim

opacity : 0 ;

-webkit-transition : all 0.2 s ease-in-out ;

transition : all 0.5 s ;

transform : scale ( 0 ) rotate ( 500 deg );

& .mfp-bg

opacity : 0 ;

transition : all 0.5 s ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : scale ( 1 ) rotate ( 0 deg );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : scale ( 0 ) rotate ( 500 deg );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== Move-horizontal effect ======

.mfp-move-horizontal

/* start state */

.mfp-with-anim

opacity : 0 ;

transition : all 0.3 s ;

transform : translateX ( -50 px );

& .mfp-bg

opacity : 0 ;

transition : all 0.3 s ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : translateX ( 0 );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : translateX ( 50 px );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== Move-from-top effect ======

.mfp-move-from-top

.mfp-content

vertical-align : top ;

/* start state */

.mfp-with-anim

opacity : 0 ;

transition : all 0.2 s ;

transform : translateY ( -100 px );

& .mfp-bg

opacity : 0 ;

transition : all 0.2 s ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : translateY ( 0 );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : translateY ( -50 px );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== 3d unfold ======

.mfp-3d-unfold

.mfp-content

perspective : 2000 px ;

/* start state */

.mfp-with-anim

opacity : 0 ;

transition : all 0.3 s ease-in-out ;

transform-style : preserve-3d ;

transform : rotateY ( -60 deg );

& .mfp-bg

opacity : 0 ;

transition : all 0.5 s ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : rotateY ( 0 deg );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : rotateY ( 60 deg );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== Zoom-out effect ======

.mfp-zoom-out

/* start state */

.mfp-with-anim

opacity : 0 ;

transition : all 0.3 s ease-in-out ;

transform : scale ( 1.3 );

& .mfp-bg

opacity : 0 ;

transition : all 0.3 s ease-out ;

/* animate in */

& .mfp-ready

.mfp-with-anim

opacity : 1 ;

transform : scale ( 1 );

& .mfp-bg

opacity : 0.8 ;

/* animate out */

& .mfp-removing

.mfp-with-anim

transform : scale ( 1.3 );

opacity : 0 ;

& .mfp-bg

opacity : 0 ;

====== «Hinge» close effect ======

@keyframes hinge

20%, 60%

40%

80%

100%

.hinge

animation-duration : 1 s ;

animation-name : hinge;

.mfp-with-fade

// before-open state

.mfp-content ,

& .mfp-bg

opacity : 0 ;

transition : opacity .5 s ease-out ;

// open state

& .mfp-ready

.mfp-content

opacity : 1 ;

& .mfp-bg

opacity : 0.8 ; // background opacity

// closed state

& .mfp-removing

& .mfp-bg

opacity : 0 ;

/* preview styles */

html

font-family : » Calibri » , » Trebuchet MS » , » Helvetica » , sans-serif ;

margin-top : 0 ;

font-size : 24 px ;

a ,

a :visited

color : #1760BF ;

text-decoration : none ;

a :hover

color : #c00 ;

.links

margin-bottom : 5 px ;

margin : 24 px 0 0 0 ;

.bottom-text

margin-top : 40 px ;

border-top : 2 px solid #CCC ;

border-bottom : 1 px solid #CCC ;

max-width : 650 px ;

Источник

Анимируй это! Анимация всплывающих окон используя только css

Идея анимаций не нова, и я не первый кто про них пишет. Но тут мы работаем с WP-Recall, поэтому я покажу как использовать анимации применительно к всплывающему окну входа и регистрации. А у реколл всплывающая форма не только у формы авторизации

Эту технику я использовал в бесплатном Float Chat и в премиум дополнении личного кабинета Across Ocean PRO. Делюсь с вами.

Начало:

Теории не будет – интернет ею завален. Сразу в бой:

Определяем класс всплывающего блока который мы анимируем. Если вы не умеете работать с консолью разработчика — учитесь
Применяем к нему анимацию и время ее действия
Анимация – это ключевые кадры от 0% до 100% — можно их наплодить сколь угодно и все выходит очень просто.

Класс всплывающего блока определили, теперь применим к нему css. Эффект когда форма сверху вниз опустится, с плавным появлением:

.panel_lk_recall.floatform < animation-duration: 0.55s; /* Время работы анимации */ animation-fill-mode: both; /* Поведение анимации */ animation-name: fadeInDown; /* Имя анимации */ >@keyframes fadeInDown < /* Сама анимация */ 0% < /* Старт анимации */ opacity: 0; transform: translate3d(0px, -100%, 0px); >100% < /* в финале анимации - финал это заданная 0.55s */ opacity: 1; transform: none; >>

Вписываем это в ваш стилевой файл, сохраняем — смотрим.

Не знаете куда вставить стили чтобы не затерлись после обновления? Посмотрите в сторону Alpha fixator — на своем сайте я пишу в него небольшие правки и сниппеты.

Демо анимации всплывающей формы входа и регистрации

На просторах интернета я нашел на гитхабе большой список анимаций (14 видов). Но к сожалению кому он принадлежал, сейчас не вспомню — если вы укажете на него линк — добавлю в эту статью.

Скачивайте этот список, делайте ваши сайты удобными и красивыми. Дьявол в мелочах!

Источник