Բարև Ձեզ, հարգելի՛ ընթերցող։ Կարծում եմ շատերին կհետաքրքրի այս գրառման թեման, քանի որ այն կարող է օգնել Ձեզ իրականացնել գեղեցիկ հնարքներ Ձեր պրոյեկտներում։ Խոսքը գնում է CSS-ի animation հատկության մասին։ Մինչև CSS3-ի ի հայտ գալը, վեբ կայքերում անիմացիան իրականացվում էր javascript – ի կամ flash – ի միջոցով։ Այժմ մեր կայքերում անիմացիա ունենալու համար ամենևին էլ պարտադիր չէ օգտվել դրանցից։ CSS3-ը մեզ հնարավորություն է ընձեռում բավականին հեշտությամբ կառուցել անիմացիաներ։ Այն կարելի է կիրառել ցանկացած HTML էլեմենտի վրա։ Սակայն մինչև որևէ էլեմենտի վրա անիմացիա կիրառելը, նախ մեզ հարկավոր է այսպես ասած հայտարարել տվյալ անիմացիան։ Այսինքն մենք պետք է նախապես հայտարարենք, թե ինչ գործողություններ պետք է կատարի այդ անիմացիան։ Անիմացիայի այդպիսի հայտարարումը իրականացվում է @keyframes – ների միջոցով։
Սկզբնական շրջանում հանրահայտ դիտարկիչներից ոչ բոլորն էին կարողանում իրականացնել այսպիսի անիմացիաները։ Սակայն որոշ ժամանակ անց այդ հարցը լուծվեց CSS կոդի մեջ դիտարկիչներին համապատասխան նախածանցներն ավելացնելով։ Այժմ արդեն գրեթե բոլոր առաջատար դիտարկիչներն ի վիճակի են իրականացնելու CSS անիմացիաներն առանց նախածանցներ գրելու, բայց և այնպես ապահովության համար դեռ շարունակվում է նախածանցների օգտագործումը։ Եվ այսպես @keyframes – ի միջոցով հայտարարում ենք որևէ անիմացիա՝ նրան տալով մեր պրոյեկտի համար չկրկնվող անվանում և այդ անվանումը, այսպես ասած, կանչում ենք animation – ի միջոցով և նրան տալիս սկզբնական դադար, անիմացիայի իրականացման տևողություն, քանակ, ուղղություն և ընթացքի ձև ։
Եկեք այժմ միասին կյանքի կոչենք մի օրինակ՝ նվիրված CSS անիմացիային, որն ի վերջո պետք է ունենա այսպիսի տեսք:
Վերցնենք այսպիսի մի HTML կոդի օրինակ․
<div class="container">
<div class="first">
<div class="children">
<h3 class="post-title">First Post Titile</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
</div>
</div>
<div class="first">
<div class="children">
<h3 class="post-title">Second Post Titile</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
</div>
</div>
<div class="first">
<div class="children">
<h3 class="post-title">Third Post Titile</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
</div>
</div>
<div class="first">
<div class="children">
<h3 class="post-title">Fourth Post Titile</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellat eveniet, voluptate ipsa earum atque laborum eligendi reprehenderit dolore labore voluptatibus neque saepe, natus asperiores eos exercitationem quod dicta provident impedit praesentium perferendis enim laudantium. Et ad, quidem laudantium deserunt quas alias, ducimus excepturi ratione nesciunt, illum magnam voluptate. Hic laudantium sequi temporibus, facere rerum ut provident recusandae excepturi at earum maxime quod dignissimos labore, esse, fugit autem. Velit ea esse nemo impedit fugiat itaque temporibus autem cum, libero quasi eos id culpa suscipit doloribus ipsum tenetur tempore laudantium blanditiis ullam molestias? Minus accusantium, dolores quidem, ad sapiente repudiandae quae?</p>
</div>
</div>
</div>
որի համար ունենք այսպիսի CSS ձևավորում․
body{
font-size: 100%;
margin: 0;
font-family: Tahoma, sans-serif;
}
.container{
background: #eee;
margin: 0;
padding: 50px;
}
.container > div{
width: 50%;
margin: 50px auto;
}
.children{
background: #fff;
max-width: 1000px;
border: 1px solid #aaf;
padding: 10px 20px;
text-align: justify;
border-radius: 15px;
box-shadow: 2px 2px 2px #888;
}
.post-title{
text-align: center;
}
Այս դեպքում մենք ունենք սովորական էջ, որի վրա չկա ոչ մի շարժ կամ անիմացիա։ Եթե մենք վերը նշված մեթոդներով մեր CSS կոդին ավելացնենք անիմացիայի հայտարարումը այնուհետև էլեմենտներից մեկի վրա կանչենք այդ անիմացիան, ապա մենք մեր էջում կունենանք շարժ։
/**
Keyframes
*/
@keyframes post-y-rotate{
0%{transform: rotateY(0deg) scale(1)}
25%{transform: rotateY(90deg) scale(1.1)}
50%{transform: rotateY(180deg) scale(1.1)}
75%{transform: rotateY(270deg) scale(1.1)}
100%{transform: rotateY(360deg) scale(1)}
}
Պարզենք, թե ինչ է իրենից ներկայացնում կոդի այս հատվածը։ Ինչպես արդեն նշեցի վերևում, @keyframes – ից հետո գրվում է անիմացիայի անվանումը։ Ձևավոր փակագծերի մեջ գրում ենք, թե էլեմենտը, որի վրա կիրառվելու է տվյալ անիմացիան, ինչ պետք է անի ժամանակի առանձին հատվածներում։ Սկզբնական պահին այն կգտնվի այն վիճակում, ինչ վիճակում գտնվել է մինչև անիմացիայի կիրառումը։ Ժամանակի առաջին 25% – ից հետո այն Y առանցքի շուրջ կպտտվի 90 աստիճանով և կմեծացնի իր չափերը սկզբնականի 10% – ի չափով։ Հաջորդ 25% – ից հետո այն կպտտվի ևս 90 աստիճանով, իսկ չափերը չեն փոխվի։ Եվ այսպես մինչև անիմացիայի ավարտը։ Այժմ արդեն ժամանակն է կանչելու այս անիմացիան որևէ էլեմենտի վրա` հետևյալ կոդի միջոցով․
.first:hover .children{
animation-name: post-y-rotate;
animation-delay: .2s;
animation-duration: .8s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
Այստեղ նշված են անիմացիայի անվանումը, սկզբնական դադարը՝ 0․2վ, տևողությունը՝ 0․8վ, անիմացիաների քանակը՝ 1 անգամ և թե ինչպես իրականացնել անիմացիան՝ սահուն։ Այսպիսով մենք ստացանք էջի ինչ-որ հատվածի պտույտ ու մի փոքր մեծացում և փոքրացում՝ մկնիկը նրա parent էլեմենտի վրա պահելու ժամանակ jsfiddle.net։
Այսպիսի անիմացիաներ կարելի է իրականացնել տարբեր գործողությունների ժամանակ (hover, click, scroll, load և այլն), որոնք կորոշեք արդեն Դուք ինքներդ՝ ելնելով Ձեր պրոյեկտի տվյալ պահի պահանջներից։ Իմ հետագա գրառումների մեջ ես Ձեզ կներկայացնեմ CSS անիմացիաների բազմաթիվ կիրառություններ, որոնք կարող են շատ տպավորիչ ու հաճելի դարձնել մեր կայքէջերը։ Անպայման փորձեք տարբեր տեսակի օրինակներ գրել այս թեմայի վերաբերյալ, որպեսզի այն հիմնովին տպավորվի Ձեր մեջ։ Իսկ ցանկացած տիպի խնդիրների դեպքում գրեք մեզ և մենք անպայման կքննարկենք այն միասին։
Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով IT-Blog թիմ։
