image not found

CSS Animations 3D Creative and Unique CSS Transitions Animation With Examples

<html lang="en">
<head>
<title>Code karne do | Animations</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2 class="text-center">CSS Animations Transform</h2>
<div class="wrap">
<div class="ourbox">
<div class="bluecolor scaleX ">
scaleX Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor scaleY">
scaleY Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor scale">
scale Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor translateX">
translateX Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor translateY">
translateY Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor translate">
translate Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor matrix">
matrix Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor rotate">
rotate Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor skew">
skew Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor skewX">
skewX Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor skewY">
skewY Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor matrix3d">
matrix3d Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor translate3d">
translate3d Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor rotateY">
rotateY Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor rotateX">
rotateX Transform
</div>
</div>
<div class="ourbox">
<div class="bluecolor translateZ">
translateZ Transform
</div>
</div>
</div>
</body>


परिवर्तन (ट्रांजिशन) एनिमेशन एक दृश्य प्रभाव है जिसका उपयोग विभिन्न दृश्यों या स्थितियों के बीच धीरे-धीरे बदलने के लिए किया जाता है। यह एनिमेशन फिल्म, टीवी शो, प्रेजेंटेशन, और वीडियो संपादन में व्यापक रूप से उपयोग होता है। इसे और अधिक समझने के लिए नीचे कुछ प्रमुख परिवर्तन एनिमेशन तकनीकों का विवरण दिया गया है:


1. फेड इन / फेड आउट (Fade In / Fade Out)

यह तकनीक एक दृश्य को धीरे-धीरे दिखाई देने (फेड इन) या गायब होने (फेड आउट) के लिए उपयोग होती है। फेड इन में दृश्य धीरे-धीरे स्पष्ट होता है, जबकि फेड आउट में दृश्य धीरे-धीरे धुंधला होता जाता है।

2. स्लाइड (Slide)

इसमें एक दृश्य एक दिशा में स्लाइड करके दूसरे दृश्य में बदल जाता है। उदाहरण के लिए, एक दृश्य बाएं से दाएं, ऊपर से नीचे, या किसी अन्य दिशा में स्लाइड कर सकता है।

3. वाइप (Wipe)

वाइप एनिमेशन में एक दृश्य दूसरे दृश्य को मिटाता हुआ प्रतीत होता है। यह किसी एक दिशा में हो सकता है, जैसे बाएं से दाएं या ऊपर से नीचे।

4. जूम इन / जूम आउट (Zoom In / Zoom Out)

इसमें एक दृश्य को जूम इन (बड़ा) या जूम आउट (छोटा) किया जाता है। यह तकनीक अक्सर फोकस बदलने या किसी विशेष वस्तु पर ध्यान केंद्रित करने के लिए उपयोग होती है।

5. क्रॉसडिसॉल्व (Cross Dissolve)

इस तकनीक में एक दृश्य धीरे-धीरे गायब होता है जबकि दूसरा दृश्य उसके स्थान पर आता है। यह तकनीक दोनों दृश्यों के बीच एक समकालिक परिवर्तन प्रदान करती है।

6. स्पिन (Spin)

स्पिन परिवर्तन में एक दृश्य घूमता हुआ बदलता है, जैसे कि एक पहिया घूम रहा हो। यह तकनीक अक्सर एनिमेशन और ग्राफिक्स में उपयोग होती है।

7. फ्लिप (Flip)

फ्लिप एनिमेशन में एक दृश्य को किसी दिशा में फ्लिप किया जाता है, जैसे एक पन्ना पलटते समय होता है। यह परिवर्तन आमतौर पर तेज और ध्यान आकर्षित करने वाला होता है।

ये परिवर्तन एनिमेशन तकनीकें आपकी रचनाओं में गतिशीलता और पेशेवरिता जोड़ सकती हैं। इन्हें सही तरीके से और सही समय पर उपयोग करने से आपकी प्रस्तुति या वीडियो में आकर्षण और गहराई आ सकती है।

.text-center{text-align: center;}
.wrap {
margin: 50px auto;
max-width: 80%;
width: 80%;
display: flex;
flex-flow: row wrap;
justify-content: center;
font-family: sans-serif;
}

.ourbox {
width: calc(20%);
margin:30px;
background: #ddd;
cursor: pointer;
color: #FFF;
text-align: center;
line-height: 130px;
}

.bluecolor {
background-color: #ff5d7d;
}


.scaleX {
transform: scaleX(1);
transition: transform 0.7s ease;
}


.ourbox:hover .scaleX {
transform: scaleX(2);
}

.scaleY {
transform: scaleY(1);
transition: transform 0.7s ease;
}


.ourbox:hover .scaleY {
transform: scaleY(2);
}

.scale {
transform: scale(1, 1);
transition: transform 0.7s ease;
}


.ourbox:hover .scale {
transform: scale(1.5, 1.5);
}

.translateX {
transform: translateX(1);
transition: transform 0.7s ease;
}


.ourbox:hover .translateX {
transform: translateX(2em);
}

.translateY {
transform: translateY(1);
transition: transform 0.7s ease;
}


.ourbox:hover .translateY {
transform: translateY(2em);
}

.translate {
transform: translate(1, 1);
transition: transform 0.7s ease;
}


.ourbox:hover .translate {
transform: translate(2em, 2em);
}

.matrix {
transform: matrix(1, 1, 1, 1);
transition: transform 0.7s ease;
}

.ourbox:hover .matrix {
transform: matrix(1, -1, 0, 1, 0, 0);
/* Standard syntax */
}

.rotate {
transform: rotate(0);
transition: transform 0.7s ease;
}

.ourbox:hover .rotate {
transform: rotate(270deg);
/* Standard syntax */
}

.skew {
transform: skew(1, 1);
transition: transform 0.7s ease;
}

.ourbox:hover .skew {
transform: skew(30deg, 20deg);
/* Standard syntax */
}

.skewX {
transform: skewX(1);
transition: transform 0.7s ease;
}

.ourbox:hover .skewX {
transform: skewX(30deg);
/* Standard syntax */
}

.skewY {
transform: skewY(1);
transition: transform 0.7s ease;
}

.ourbox:hover .skewY {
transform: skewY(30deg);
/* Standard syntax */
}

.matrix3d {
transform: matrix3d(1);
transition: transform 0.7s ease;
}

.ourbox:hover .matrix3d {
transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)
/* Standard syntax */
}

.translate3d {
transform: translate3d(1px, 1px, 1);
transition: transform 0.7s ease;
}

.ourbox:hover .translate3d {
transform: translate3d(1px, 1px, 50px) rotate3d(3, 2, 2, 90deg);
/* Standard syntax */
}

.rotateY {
transform: perspective(1) scaleZ(1) rotateY(0deg);
transition: transform 0.7s ease;
/* perspective: 300px; */
/* transform-style: preserve-3d; */
}

.ourbox:hover .rotateY {
/* transform: translate3d(42px, 42px, 42px); */
transform: perspective(500px) scaleZ(2) rotateY(45deg);
/* Standard syntax */
}

.rotateX {
/* perspective: 100px; */
transform: perspective(1) scaleZ(1) rotateX(0deg);
transition: transform 0.7s ease;
}

.ourbox:hover .rotateX {
transform: perspective(500px) scaleZ(2) rotateX(45deg);
/* Standard syntax */
}

.translateZ {
transform: translateZ(1px);
transition: transform 0.7s ease;
}

.ourbox:hover .translateZ {

transform: rotate3d(3, 2, 2, 90deg) translateZ(50px);
/* Standard syntax */
}


CSS में ट्रांजिशन एनिमेशन का उपयोग वेब पेजों में परिवर्तन को अधिक सुगम और दृष्टिगोचर बनाने के लिए किया जाता है। यह उपयोगकर्ता अनुभव को बेहतर बनाता है और साइट को अधिक आकर्षक और पेशेवर बनाता है। यहाँ कुछ प्रमुख कारण हैं कि क्यों CSS ट्रांजिशन एनिमेशन का उपयोग किया जाता है:


1. उपयोगकर्ता अनुभव (User Experience) सुधारना

ट्रांजिशन एनिमेशन उपयोगकर्ताओं को एक इंटरफेस में होने वाले परिवर्तनों को आसानी से समझने में मदद करते हैं। उदाहरण के लिए, जब कोई बटन होवर किया जाता है और उसका रंग धीरे-धीरे बदलता है, तो यह उपयोगकर्ता को एक विजुअल संकेत देता है कि बटन क्लिक करने योग्य है।

2. विजुअल अपील (Visual Appeal) बढ़ाना

एनिमेशन और ट्रांजिशन वेब पेज को जीवंत और आकर्षक बनाते हैं। इससे वेबसाइट देखने में अधिक दिलचस्प लगती है और उपयोगकर्ता की नजरें अधिक समय तक साइट पर बनी रहती हैं।

3. ध्यान आकर्षित करना

ट्रांजिशन एनिमेशन का उपयोग महत्वपूर्ण तत्वों पर ध्यान आकर्षित करने के लिए किया जा सकता है। जैसे कि फॉर्म में इनपुट फील्ड्स पर फोकस करते समय बॉर्डर का रंग बदलना।

4. सहज परिवर्तन (Smooth Transition)

ट्रांजिशन एनिमेशन के माध्यम से, विभिन्न राज्यों के बीच के परिवर्तन को सहज और प्राकृतिक बनाया जा सकता है। इससे अचानक से होने वाले बदलावों के बजाय, एक सॉफ्ट और फ्लुइड अनुभव मिलता है।

5. ब्रांडिंग और स्टाइल (Branding and Style)

कंपनी के ब्रांड और स्टाइल को मजबूत करने के लिए भी ट्रांजिशन एनिमेशन का उपयोग किया जा सकता है। इससे वेबसाइट का एक युनिक और ब्रांड के अनुरूप अनुभव मिलता है।

6. इंटरैक्टिविटी (Interactivity) बढ़ाना

ट्रांजिशन एनिमेशन वेब पेज में

empty

Comments (2 )

1
17 Aug 2024

1.

S
7 Nov 2024

Nice.

Leave A Comment

Click for Ad