Some interesting ~ impressive ~ CSS features

I`d like to start with CSS animation and transitions. Let’s look at 2 ways to create CSS animations.

1) The first is very simple, and it works through the transition property.

Using this property, you can create effects upon hovering the mouse. As a demonstration of such transitions based on the CSS transition property, the below is an example of a hover effect, by hove screen jumping :

Here you can find more information about this interesting CSS properties :

CSS 2D Transforms

2) The second method of animation is a bit more complicated — it is associated with the description of the animation through the @keyframe rule, which allows you to create a repeating or looped animation that does not depend on the actions of the user or javascript trigger.

Syntax:

@keyframes <variable> { [ from | to | <percent> ] [, from | to | <percent> ]* }

The effect code is presented below:

@keyframes box {
 from { left: 0; }
 to { left: 300px; }
}

This code move element left 300px

More about @keyframe you can find using this link

CSS @keyframes Rule

Next interesting count values using the calc () property :

Calc () function — allows you to do simple arithmetic calculations in CSS. You can use it anywhere you need to deal with length or width.

But what’s even cooler is that you can safely mix different dimensions, whether it’s pixels or a percentage.

This allows you to create a huge number of different tricks and tricks (for example, with layers and positioning), laying on the shoulder blades all those tricks that you may have had to resort to getting a similar result.

More about calc():

calc()

Here you can check support in different browsers:

Can I use... Support tables for HTML5, CSS3, etc

Also Images as borders or the border-image property :

The border-image property allows you to display specially designed images around elements as a stroke. Certain boundaries contained in the image or in the sprite correspond or correspond to certain boundaries of block elements.

See an example to more clearly understand this:

border-image

Understanding border-image | CSS-Tricks

Useful property Backgrounds on different layers:

With this property, we can create incredibly interesting effects. You can add a whole image from its different parts located on different layers.

Using multiple backgrounds

Can I use... Support tables for HTML5, CSS3, etc

Of course 3D CSS Transformation :

There is nothing more attractive and wonderful on the web than the impressive 3D CSS demo. Although the usefulness of this outside the demo and outside the portfolio is somewhat questionable, 3D CSS offers some powerful features for designers and developers who can win the hearts of users if used properly.

Here you can find a few examples :

Text from the smoke animation effect

Last properties are CSS clip and CSS mack

The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.

mask

clip

Hope this article a little bit useful.