Enhance Your Web Design with CSS Transformations and Animations

CSS Transform Properties
The transform
property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
CSS Animations
Animations are similar to the transform property. When dealing with complex animations, we will use the animation property. This animation contains the animation name, duration, iteration count, direction, and delay. It can be defined using @keyframes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animations</title>
<style>
.container{
background-color: blanchedalmond;
height: 70vh;
width:60vw;
}
.box{
width: 200px;
height: 150px;
background-color: aquamarine;
/* animation-name: Animation1;
animation-duration: 4s;
animation-iteration-count: 5;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-direction: alternate-reverse; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: Animation1 3s ease-in-out 2s 5 reverse,
Animation2 3s ease-in-out 2s 5 forwards
;
}
@keyframes Animation1 {
from{
}
to{
transform: translateY(500px);
}
}
@keyframes Animation2 {
from{
}
to{
transform: scaleX(2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
CSS Object-Fit and Position
Theobject-fit
property in CSS controls how content, especially images and videos, is sized within a defined area. It helps maintain a visually appealing layout by determining how an element's content fits its container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Object-fit</title>
<style>
.container{
height: 300px;
width: 400px;
border: 2px solid black;
background-image: url(<https://media.istockphoto.com/id/1065043970/photo/young-woman-sitting-on-edge-looks-out-at-view.jpg?s=612x612&w=0&k=20&c=zXlF6EJwCHDAtEJ_kh8zs6PqliCKZA75F93ffAkJURY=>);
background-position: center center;
background-repeat: no-repeat;
}
/* img{
height: 300px;
width: 400px;
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit:scale-down;
} */
</style>
</head>
<body>
<div class="container">
<!-- <img src="<https://media.istockphoto.com/id/1065043970/photo/young-woman-sitting-on-edge-looks-out-at-view.jpg?s=612x612&w=0&k=20&c=zXlF6EJwCHDAtEJ_kh8zs6PqliCKZA75F93ffAkJURY=>" alt="img"> -->
</div>
</body>
</html>
CSS Filters
The filter CSS property adds graphical effects such as blur or color shift to an element. Filters are often used to modify the appearance of images, backgrounds, and borders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Filters</title>
<style>
.img1{
filter: blur(2px);
}
.img2{
filter: contrast(100%);
}
.img3{
filter: grayscale(100%);
}
/* .container .img1{
filter: blur(2px);
} */
</style>
</head>
<body>
<div class="container">
<img class="img1" src="<https://media.istockphoto.com/id/1403500817/photo/the-craggies-in-the-blue-ridge-mountains.jpg?s=612x612&w=0&k=20&c=N-pGA8OClRVDzRfj_9AqANnOaDS3devZWwrQNwZuDSk=>" alt="img1">
<img class="img2" src="<https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtnvAOajH9gS4C30cRF7rD_voaTAKly2Ntaw&s>" alt="img2">
<img class="img3" src="<https://static.vecteezy.com/vite/assets/photo-masthead-375-BoK_p8LG.webp>" alt="img3">
</div>
</body>
</html>
Challenges and Solutions
Challenge: I was facing issues with the output in my animations; it wasn't displaying correctly, which was quite frustrating.
Solution: After inspecting the code thoroughly and rerunning it, I was able to identify the problem. Now, the output is working perfectly!
Subscribe to my newsletter
Read articles from Abdul Talha directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
