CSS3 floating animation effect and css3 floating Animation

CSS3 floating animation effect and css3 floating Animation

With the pseudo-class elements hover and transform and transition of CSS3, you can make some cool animation effects. The following are examples used in some projects for your study. Demo address: runjs.

Browser compatibility: Chrome, Safari, IE10, and later versions. IE9 does not support gradient effects, whereas IE8 or earlier does not.

Transform: This attribute allows us to rotate, scale, move, or tilt an element ).

Transition: Transition attribute. This attribute is short for setting four transition attributes:

• Transition-property: Specifies the name of the CSS attribute for setting the transition effect.
• Transition-duration: specifies the number of seconds to complete the transition.
• 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 suspension, set the transition attribute of hover out (transition), and set the transparency (opacity) to 0, and set the floating style through the hover pseudo class, transition attribute (if this attribute is set, the transition effect of the element changes according to the set value, and changes according to the value defined before hover after hover is out, otherwise, the transition effect changes according to the value defined before hover. The transparency is 1.

Core code: 1. The title float at the bottom right of the title shows the 3D effect.

Displacement: translate/X/Y.

Before suspension:

.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 suspension:

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

2. The title is displayed at the bottom of the image.

Displacement: translate/X/Y.

Before suspension:

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

After suspension:

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

3. The title pushes the image up

Displacement: translate/X/Y. The pushed image part is overflow: hidden.

Before suspension:

.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 suspension:

.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. Fold the title 3D and push the image to the right.

Perspective attribute: This attribute defines the distance between a 3D element and a view, in pixels. This attribute allows you to change 3D elements to view 3D element views. When an element defines the perspective attribute, itsThe child element will get the perspective effect, AndNot the element itself. Used 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 3D effects, while defining the figure transform-style inside li as perspective-3d.

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

To achieve the effect, you need to add a container div for img and set overflow: hidden. Hide the extra part after the image is moved to the right. Hover:

.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 to rotate-90 °, and set the image to the outside 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;}