CSS3 How to achieve the animation effect of panorama (with code)

This article brings the content is about CSS3 how to achieve the panorama of the animation effect (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Basic code

HTML code:

<div class= "Panorama" ></div>

Start by defining some basic styles and animations:

. panorama {  width:300px;  height:300px;  Background-image:url (http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);  Background-size:auto 100%;  Cursor:pointer;  Animation:panorama 10s linear infinite Alternate;} @keyframes Panorama {to  {    background-position:100% 0;  }}

background-size: auto 100%;This code means that the picture is higher than the height of the container, and the horizontal direction is automatic, that is, the left side of the picture is left.

The process of performing the animation is: cycle, reciprocating, linear and time period is 10s.

Manually control animation execution

Now we realize that when the mouse hovers over the picture, let it move, the mouse left to make it static.

This property needs to be used animation-play-state: paused | running , which represents the two states of the animation: 暂停 and 运行 .

Full CSS code:

. panorama {  width:300px;  height:300px;  Background-image:url (http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);  Background-size:auto 100%;  Cursor:pointer;  Animation:panorama 10s linear infinite alternate;  animation-play-state:paused;}. Panorama:hover,.panorama:focus {  animation-play-state:running;} @keyframes Panorama {to  {    background-position:100% 0;  }}