Home > Article > Web Front-end > css to achieve image loop animation effect (code)

css to achieve image loop animation effect (code)

不言Original: 2018-08-18 14:52:385667browse

The content of this article is about the animation effect (code) of css to realize image loop. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<style>
*{margin: 0;padding: 0;}
.robot{
	width: 167px;
    height: 191px;
    background: url(robot.png) no-repeat;
	position: absolute;
	left: 0px;
	top: 20px;
	animation:robotmove 10s linear infinite;
}
/*循环翻身*/
@keyframes robotmove{
	0%{}
	49%{transform:rotateY(0deg);}/*保障前面百分之四十九图片不会中途翻转*/
	50%{left:1000px; transform:rotateY(180deg);}/*49%-50%图片翻转*/
	100%{left:0px; transform:rotateY(180deg);}/*保障后百分之五十都是翻转了180度的形状*/
}
/*一直一个方向、无翻转*/
@keyframes robotmove2{
	0%{}
	100%{left: 1100px;}
}
/*兼容前面加-webkit*/
</style>
</head>
<body>
<p class="robot"></p>

Related recommendations:

CSS3 animation to achieve 5 preload animation effects

Use css jquery to achieve image sliding effect _html/css_WEB-ITnose

Share the effect code of a CSS3 circle zoom-in and zoom-out loop animation

The above is the detailed content of css to achieve image loop animation effect (code). For more information, please follow other related articles on the PHP Chinese website!

jquery css css3 循环

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to insert CSS in html? Introduction to four methods of inserting css into html (with code)Next article：How to insert CSS in html? Introduction to four methods of inserting css into html (with code)

See more

css to achieve image loop animation effect (code)

Related articles