Web Front-end
CSS Tutorial
How to gradually change width by hovering over a split element in CSS?
How to gradually change width by hovering over a split element in CSS?
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!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
How to select a child element with the first class name item through CSS?
Apr 05, 2025 pm 11:24 PM
When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?
Apr 05, 2025 pm 10:21 PM
How to implement Windows-like in front-end development...
