A smooth transition from one state to another provides the Transition CSS property, controlling the speed of the animation when changing the values of styles. Without this property on the site, everything would change instantly, which is not very pleasant for the human eye. Compare this with the sharp inclusion of bright lighting at night. A person by nature is not used to such an effect, therefore, to control the speed of changing styles, they use Transition, which softens these transitions for perception.
CSS Transitions can be initiated directly by the pseudo-classes ": hover" (activated when the mouse moves over an element), ": focus" (activated when the user clicks on the element) or ": active" (when the user clicks on the input element).
Shadows in CSS: box-shadow and text-shadow under transition control
Very often sites use CSS text-shadow and box-shadow properties. Usually they are executed almost imperceptibly, only so that the visitor can understand that the block or text is “clickable”. Shadows most often do not make them vivid and "loud", so the following example is applicable to most projects.
On the left is a block without shadows, and on the right, after the hover event, a shadow appears around the block (box-shadow) and a shadow around the text (text-shadow).
box-shadow: 3px 4px 10px #ddd; text-shadow: 1px 1px 2px currentColor;
The text shadow color is specified universal - "current" ("currentColor"), but you can make the text shadow any other color.
.text-shadow{ display:block; position: relative; margin-top: 50px; padding-top: 50px; text-align: center; left: 50%; top: 50px; width: 200px; height: 150px; transition: all 1s; } .text-shadow:hover{ box-shadow: 3px 4px 10px #ddd; } .text-shadow span{ color: #ccc; font-size: 3em; } .text-shadow:hover span{ text-shadow: 1px 1px 2px currentColor; }
HTML:
<div class="text-shadow"> <span></span> </div>
Smooth background color and opacity in CSS
To change the background color when you hover over a block, you need to define styles for the "static" state and for the "hover" state:
<div class="background"> <span>Background</span> </div>
.background{ display:block; position: relative; margin-top: 50px; padding-top: 50px; text-align: center; left: 50%; top: 50px; width: 200px; height: 150px; background-color: #80D39B; transition: background-color 5s; }
For the "hover" pseudo-class, when you hover over the div, we assign a different background color:
.background:hover{ background-color: #BE3E82; }
A smooth transition from one background color to another occurs thanks to CSS Transition: background for 5 seconds. Add a font color change:
.background span{ color: #BE3E82; font-size: 2em; transition: color 5s; } .background:hover span{ color: #80D39B; }
Make the block translucent using CSS Transition opacity. Add the following lines to the styles of the ".background" class:
.background{ opacity: 0.5; background-color: #80D39B; transition: background-color 5s, opacity 5s; }
Please note that all CSS Transitions are written on the same line, separated by commas, the only way they can work correctly.
This entry can be replaced with a similar one:
transition-property: background-color, opacity; transition-duration: 5s;
In this case, both properties will change within 5 seconds, but if you need to set a different time, then it will look like this:
transition-duration: 5s, 10s;
Now the background color changes in 5 seconds, and the opacity in 10.
If you need a delay in starting the animation, use the transition-delay property. You need to record it after transition:
transition: background-color 5s, opacity 5s; transition-delay: 10s;
The entire block became translucent, i.e. The opacity property is applied to both the background and the text (option 3 in the picture). If the text should not be translucent (option 4), then opacity should be applied only to the background:
.background{ background-color:rgba(128, 211, 155,0.5); }
All together will look like this:
.background{ display:block; position: relative; margin-top: 50px; padding-top: 50px; text-align: center; left: 50%; top: 50px; width: 200px; height: 150px; background-color:rgba(128, 211, 155,0.5); transition: background-color 5s, opacity 5s; } .background:hover{ background-color:rgba(190, 62, 130,1); } .background span{ color: #BE3E82; font-size: 2em; transition: color 5s; } .background:hover span{ color: #80D39B; }
Animating an Accordion with CSS Transitions
No pure CSS accordion or slider can do without CSS Transitions.
Consider a simple example of an accordion based on input radio, where the "hover" pseudo-class will initiate a transition of styles from one state to another. When you hover over a block, the height of this block will increase, since it is a radio type, then the remaining blocks will be closed:
HTML:
<div class="wrap"> <label for="number1" > <input type="radio" name="number" id="number1" > <div class="slider">1</div> </label> <label for="number1" > <input type="radio" name="number" id="number2" > <div class="slider">2</div> </label> <label for="number1" > <input type="radio" name="number" id="number3" > <div class="slider">3</div> </label> <label for="number1" > <input type="radio" name="number" id="number4" > <div class="slider">4</div> </label> </div>
To get started, remove the input radio circles from the visible area of the screen:
input[id^="number"]{ position: absolute; left: -9999px; }
CSS for the block with the required minimum set of styles:
.slider{ display: block; position: relative; width: 200px; height: 50px; text-align: center; padding-top: 50px; font-size: 3em; transition: all 1s; } label[for^="number"]:hover .slider{ background: #b2ebf2; height: 200px; }
When you hover over a div, the background color changes and the height increases. If you need all the text to fit in the block, then use max-height 100% instead of height 200px.
Add a shadow to all the blocks so that when you hover over the borders of the accordion:
.wrap{ position: absolute; margin-left: 50%; margin-top: 50px; width: 200px; transition: box-shadow 1s; } .wrap:hover{ height: 550px; box-shadow: 3px 4px 10px #ddd; }
The "hover" event initiates a change in the style of the accordion and we see its size thanks to the box-shadow property, the block height (height or max-height) also increases and the background-color changes.
Fade-out text: Text Fading in CSS
On news sites, where there are a lot of columns with announcements of articles, you can see the text, which gradually becomes almost transparent. To achieve this effect, most web programming training resources suggest using the linear-gradient property, but in this case, you must specify the color of the gradient. And if we do not know this color in advance? Suppose you write additional functionality not for one site, but for CMS or frameworks, and you do not know what font or background color will be on these sites. Let's look at a suitable option for such cases.
The result that we get:
In the picture, the black and yellow text disappear on a motley background and at the same time, we do not specify these colors for the gradient in the stylesheet:
CSS:
.fadeout{ position: relative; -webkit-mask-size: 100% 100%; -webkit-mask: -webkit-gradient(linear, right bottom, right top, color-stop(1.00, rgba(0,0,0,1)), color-stop(0.30, rgba(0,0,0,0.7)), color-stop(0.20, rgba(0,0,0,0.5)), color-stop(0.05, rgba(0,0,0,0.1)), color-stop(0.01, rgba(0,0,0,0.09)) ); -webkit-mask-position: left bottom; -webkit-transition: -webkit-mask-position 5s ease; }
HTML:
<div style="background-image: url(Black.jpg); width:30%;"> <div class="fadeout"> <span style="color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod urna vitae tellus gravida pharetra. Curabitur ac odio a libero ullamcorper vulputate. Morbi pretium neque vitae rhoncus viverra. Vestibulum quis facilisis lorem, eget pulvinar eros. Sed elit dui, molestie eu euismod vitae, posuere id orci. In hac habitasse platea dictumst. Praesent mi orci, congue et lacus ut, luctus finibus est. Duis eu blandit lectus. Mauris sit amet dui ac leo interdum molestie et nec tortor. Suspendisse luctus arcu non lacus mollis, ac aliquam lorem sollicitudin. Nullam ut vulputate elit. Nullam suscipit ultricies nibh, quis ullamcorper mi. Quisque a velit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ligula nisl, egestas ut eros non, pretium condimentum purus. Donec iaculis, quam ullamcorper gravida pretium, velit ex finibus ante, vel sagittis erat risus id neque. Nulla dignissim turpis elit, nec tincidunt ex malesuada ut. Nam ut neque venenatis, gravida nisl non, facilisis ligula. Morbi iaculis tincidunt nisl, a efficitur quam iaculis id. Morbi turpis neque, tristique sit amet nisi non, luctus maximus purus. Pellentesque a orci id leo mattis vulputate eget id quam. Mauris vestibulum faucibus elit, a porttitor ipsum ornare et. Pellentesque non consectetur mauris, ut scelerisque ante. Nam molestie purus dignissim, auctor justo at, rutrum nibh. Praesent justo lectus, accumsan ac tempus et, blandit vulputate magna. Morbi faucibus erat eu nunc ultricies, in semper metus convallis. Maecenas feugiat quis turpis eget rhoncus. Pellentesque et lacinia massa. Quisque vel dapibus velit. <a href="#">In non elit in felis vehicula lobortis</a>. </span> </div> </div> <div style="width:30%; background-image: url(sea.jpg); background-width:5%;"> <div class="fadeout"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod urna vitae tellus gravida pharetra. Curabitur ac odio a libero ullamcorper vulputate. Morbi pretium neque vitae rhoncus viverra. Vestibulum quis facilisis lorem, eget pulvinar eros. Sed elit dui, molestie eu euismod vitae, posuere id orci. In hac habitasse platea dictumst. Praesent mi orci, congue et lacus ut, luctus finibus est. Duis eu blandit lectus. Mauris sit amet dui ac leo interdum molestie et nec tortor. Suspendisse luctus arcu non lacus mollis, ac aliquam lorem sollicitudin. Nullam ut vulputate elit. Nullam suscipit ultricies nibh, quis ullamcorper mi. Quisque a velit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ligula nisl, egestas ut eros non, pretium condimentum purus. Donec iaculis, quam ullamcorper gravida pretium, velit ex finibus ante, vel sagittis erat risus id neque. Nulla dignissim turpis elit, nec tincidunt ex malesuada ut. Nam ut neque venenatis, gravida nisl non, facilisis ligula. Morbi iaculis tincidunt nisl, a efficitur quam iaculis id. Morbi turpis neque, tristique sit amet nisi non, luctus maximus purus. Pellentesque a orci id leo mattis vulputate eget id quam. Mauris vestibulum faucibus elit, a porttitor ipsum ornare et. Pellentesque non consectetur mauris, ut scelerisque ante. Nam molestie purus dignissim, auctor justo at, rutrum nibh. Praesent justo lectus, accumsan ac tempus et, blandit vulputate magna. Morbi faucibus erat eu nunc ultricies, in semper metus convallis. Maecenas feugiat quis turpis eget rhoncus. Pellentesque et lacinia massa. Quisque vel dapibus velit. <a href="#">In non elit in felis vehicula lobortis</a>. </div> </div>
Variegated pictures or just a colored background, you can choose another one.
The "fadeout" class defines the style of the text in the CSS file using the mask: -webkit-gradient property, as a result the text smoothly disappears.
CSS Transitions is the easiest way to perform animations. You can create transitions from one style to another, either using the abbreviated transition, or with the transition-property. The advantage of using CSS properties is their reliability and non-conflict with other programming languages and scripts. You can always be sure that the animation that is triggered by transition works stably.