Home >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?
- WBOYforward
- 2023-08-23 23:57:021429browse
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>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!