How to realize Animation of zooming in and out of Picture by css
This "css how to achieve picture zoom animation" except programmers most people do not understand, today Xiaobian in order to make you a better understanding of "css how to achieve picture zoom animation", summed up the following content, with a certain reference value, the detailed steps of the content is clear, details handled properly, I hope you can gain something through this article, let's take a look at the specific content.
Methods: 1, use the "@ keyframes animation name {}" rule and "transform:scale (scale);" statement to create zoom animation; 2, use the "picture element {animation: animation name time infinite;}" statement to scale the animation applied to the picture element.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use the animation property, the "@ keyframes" rule, and transform: scale () to zoom in and out of the picture.
Example 1:
/ * css section * / @ keyframes scaleDraw {/ * defines a Keyframe. ScaleDrew is the name of the Keyframe that needs to be bound to the selector * / 0% {transform: scale (1); / * start to the original size * / 25% {transform: scale (1.1) / * magnify 1.1x * / 50% {transform: scale (1);} 75% {transform: scale (1.1);}} .ballon {width: 150px; height: 200px; background: url ("images/balloon.png") Background-size: 150px 200px;-webkit-animation-name: scaleDraw; / * Keyframe name * /-webkit-animation-timing-function: ease-in-out; / * Speed curve of the animation * /-webkit-animation-iteration-count: infinite; / * number of times the animation is played * /-webkit-animation-duration: 5s / * time spent on animation * /}
The above attributes can also be written together.
Animation: scaleDraw 5s ease-in-out infinite;-webkit-animation: scaleDraw 5s ease-in-out infinite
Effect:
Example 2:
.live {position: relative; width: 100px; height: 100px;} .live img {width: 100px; height: 100px; z-index: 0;} @ keyframes living {0% {transform: scale (1); opacity: 0.5 } 50% {transform: scale (1.5); opacity: 0; / * while the circle is enlarged, the transparency gradually decreases to 0 percent / 100% {transform: scale (1); opacity: 0.5 }} .live span {position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: # fff; border-radius: 50%;-webkit-animation: living 3s linear infinite; z-index:-1 } .live span:nth-child (2) {- webkit-animation-delay: 1.5s; / * the second span animation delay 1.5 seconds * /}
The essence is to make use of the delay attribute of animation. The animation-related attributes of the two-layer circles are basically the same, except that most of the outermost circles set the animation-delay attribute.
What are the selectors of css? css selectors can be divided into three categories, namely, id selector, class selector and tag selector. There can be many combinations between them, such as descendant selector, sub-selector, pseudo-class selector, general selector, group selector, and so on.
Thank you for your reading. I hope you have a certain understanding of the key issue of "css how to achieve picture zooming in and out animation". The specific use needs to be understood by hands-on experiments. Try it quickly. If you want to read more articles about related knowledge points, welcome to follow the industry information channel!
