.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
17 Aug 20241.