CSS3 suspension animation effect_html/css_WEB-ITnose

You can create some cool animation effects by using CSS3 pseudo-class element hover and animation attributes such as transform and transition. Below are some examples used in the project for everyone to study and study together. Demo address: runjs.

Browser compatibility: Chrome, Safari, IE10 and above, IE9 does not support gradient effects, and IE8 and below do not support it.

transform: This attribute allows us to rotate, scale, translate or skew the element.

transition: transition attribute, which is an abbreviation attribute, used to set 4 transition attributes:

transition-property: specifies the name of the CSS attribute that sets the transition effect .

transition-duration: Specifies how many seconds it takes to complete the transition effect.

transition-timing-function: Specifies the speed curve of the speed effect.

transition-delay: Defines when the transition effect starts.

Public principles:

First define the css style before hover, the transition attribute of hover out, and set the transparency (opacity) to 0, and set the hover through the :hover pseudo-class The style after, transition attribute (transition, if this attribute is set, the transition effect of the element will change according to the set value and after hover out, it will change according to the value defined before hover, otherwise the transition effect will change according to the value defined before hover), Transparency is 1.

Core code:

1. The title floats on the lower right to display a 3D effect

Displacement: translate/X/Y.

Before suspending:

.cs-style-1 figcaption {    height: 100%;    width: 100%;    opacity: 0;    text-align: center;    backface-visibility: hidden;    transition: transform 0.3s, opacity 0.3s;    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;}

After suspending:

.cs-style-1 figure:hover figcaption {    opacity: 1;    transform: translate(15px, 15px);    -webkit-transform: translate(15px, 15px);}

2. Display the title at the bottom of the floating image

Displacement: translate/X/Y.

Before suspending:

.cs-style-2 figure img {    z-index: 10;    transition: transform 0.4s;    -webkit-transition: -webkit-transform 0.4s;}

After suspending:

.cs-style-2 figure:hover img {    transform: translateY(-90px);    -webkit-transform: translateY(-90px);}

3. The title pushes the image up

Displacement: translate/X/Y. Push up the image part with overflow:hidden.

Before suspending:

.cs-style-3 figure img {    transition: transform 0.4s;    -webkit-transition: -webkit-transform 0.4s;}.cs-style-3 figure {    overflow: hidden;}.cs-style-3 figcaption {    height: 40px;    width: 80%;    top: auto;    bottom: 0;    opacity: 0;    transform: translateY(100%);    -webkit-transform: translateY(100%);    transition: transform 0.4s, opacity 0.1s 0.3s;     -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;}

After suspending:

.cs-style-3 figure:hover figcaption{    opacity:1;    transform:translateY(0px);    -webkit-transform:translateY(0px);    transition: transform 0.4s, opacity 0.1s;    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;}.cs-style-3 figure:hover img {    transform: translateY(-50px);     -webkit-transform: translateY(-50px);}

4. 3D fold the title into the picture Push right

perspective attribute: This attribute defines the distance of the 3D element from the view, calculated in pixels. This property allows you to change the 3D element's view of the 3D element. When an element defines the perspective attribute, its child elements will get the perspective effect , and the not the element itself . Use with the perspective-origin attribute to change the bottom position of a 3D element.

Displacement: translate/X/Y

Rotation: rotate/X/Y

We use li as the foreground container so that we can achieve the 3D effect and define the inside of the li The figure's transform-style is perspective-3d.

.cs-style-4  li {    perspective: 1700px;    perspective-origin: 0 50%;}.cs-style-4 figure {    transform-style: preserve-3d;}

In order to achieve the effect, you need to add a container div to the img and set overflow:hidden. Hide the extra part of the image after it is moved to the right. Move the image when hovering over it:

.cs-style-4 figure div{    overflow:hidden;}.cs-style-4 figure img {    transition: transform 0.4s;}.cs-style-4 figure:hover img {    transform: translateX(25%);}

Set the left side of figcaption as the base to rotate -90°, and stand the image out of the screen:

.cs-style-4 figcaption{    height:250px;    width:25%;    transform-origin:0 0;    transform:rotateY(-90deg);    transition:transform 0.4s,opacity 0.1s 0.3s;    opacity:0;}.cs-style-4 figure:hover figcaption {  opacity:1;    transform:rotateY(0deg);    transition:transform 0.4s,opacity 0.1s;}

5. Title content scaling

Scale: scale.

Before suspension:

.cs-style-5 figure img{    z-index:10;    transition:transform 0.4s,opacity 0.1s 0.3s;}.cs-style-5 figure figcaption{     height: 100%;    width: 100%;    transform:scale(0.7);    opacity:0;    transition:transform 0.4s,opacity 0.1s 0.3s; }

After suspension:

.cs-style-5 figure:hover img{    transform:scale(0.3);}.cs-style-5 figure:hover figcaption{    opacity:1;    transform:scale(1);    transition:transform 0.4s,opacity 0.1s;}