Whenever we want to gradually change the style of an element, transitioning from one style to another, whether through user interaction or time spent on the site accomplish. You can use animation to change many styles over any period of time. Let's look at the animation properties you need.
Keyframe− This is used to specify the animation of an element. It contains the changes that will occur to the element's style. The element then moves from the style it was in at the beginning to the last mentioned style.
Animation-name − This is used to reference animations so that you don't have to specify the rules every time you add an animation.
Animation Duration − This specifies the duration of the animation applied to the element. Its initial value is 0ms and can proceed indefinitely.
Animation-iteration-count − This determines the number of times the animation will repeat.
Animation Delay − If you need to delay the animation for a period of time, you can use this property.
Animation Direction − This specifies whether the animation needs to be in a forward direction, a backward direction, or alternating between the two directions.
Animation Time Function − Use this property when you want the animation to have different time intervals at the beginning, middle, and end.
We can also use the "animation" abbreviation attribute , which consists of all these attributes. It works on all elements but is not inheritable. It is important to note that when using abbreviation notation, the order of the values is important because each value is interpreted differently depending on its order.
example
An example of using animation in CSS is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Now that we know what animation in CSS is, we will discuss how to animate a div element to gradually change its width.
Transition properties
We will use the transition attribute to solve this problem. This attribute is used to add transition effects to elements. It is a shorthand property available in CSS.
It defines the transition that occurs when the animation occurs, and the element changes from one state to another. It applies to all elements and is not inheritable.
The following properties constitute the abbreviated transition properties.
Transition-delay − This property specifies how long the browser needs to wait before applying transition properties. Its initial value is 0, positive values will make it wait longer, and negative values will make the transition faster.
Transition Duration - This sets the duration of time the transition effect is visible, after which the animation ends. The default value of this property is 0, so the animation is invisible by default.
Transition-property − It sets the element to which the transition effect will be applied. It can have two possible values, none and all. By default, the value is set to all, so all elements have the transition effect applied, but none means that no elements have that transition effect.
Transition-timing-function − This property is used to control the transition speed at the beginning, middle and end of the animation. The initial value is set to ease, but CSS has many predefined time functions.
We can set the transition property on hover state and the animation will be triggered on hover or using activity pseudo class. We can also use JS to dynamically allocate classes and use them to trigger transitions.
example
A simple example of using the transition attribute in CSS is as follows.
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
<a>This text will have its font modified on hover</a>
</body>
</html>
When executing the above program, a piece of text will be displayed. If you hover the mouse over it, you can see the transition effect of the text.
Using transitions as a solution
We will now see an example of using transitions to solve the problem at hand.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<h1 id="Example-of-using-transition-property-to-increase-width-gradually-on-hover">Example of using transition property to increase width gradually on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
The output of the above program is a div box whose width gradually changes from 150px to 500px within 2 seconds.
in conclusion
In summary, using CSS’s hover selector to gradually change the width of a partition element is an efficient way to add subtle animation effects without the need for additional code. This is particularly useful when creating interactive elements in web pages, such as buttons and menus. With just a few lines of code, you can create dynamic effects to make your pages stand out.
The above is the detailed content of How to gradually change width by hovering over a split element in CSS?. For more information, please follow other related articles on the PHP Chinese website!
What Are Design Tokens?Apr 22, 2025 am 09:44 AMI’ve been hearing a lot about design tokens lately, and although I’ve never had to work on a project that’s needed them, I think they’re super interesting and
An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array MethodsApr 22, 2025 am 09:41 AMMap, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right
Advanced Tooling for Web ComponentsApr 22, 2025 am 09:37 AMOver the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards.
A Website is a Car and Not a BookApr 22, 2025 am 09:36 AMI’ve been wondering for a good long while why it feels like web design and development isn’t respected as much as native app development, and why the
Case Study: Combining Cutting-Edge CSS Features Into a 'Course Navigation” ComponentApr 22, 2025 am 09:34 AMHaving been tasked with creating a UI component for navigating the content of an online course, Daniel found himself neck-deep in a pool of new CSS features that he wound up using on the project.
Better Than NativeApr 22, 2025 am 09:32 AMAndy Bell wrote up his thoughts about the whole web versus native app debate which I think is super interesting. It was hard to make it through the post
Quick Reminder That :is() and :where() Are Basically the Same With One Key DifferenceApr 22, 2025 am 09:29 AMI've seen a handful of recent posts talking about the utility of the :is() relational pseudo-selector. No need to delve into the details other than to say it
Inline SVG... CachedApr 22, 2025 am 09:21 AMI wrote that using inline icons make for the best icon system. I still think that's true. It's the easiest possible way to drop an icon onto a
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Dreamweaver Mac version
Visual web development tools
