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>
.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 )
S
7 Nov 2024Nice.
1
17 Aug 20241.