左右自动HTML,css3实现div自动左右动

1

2

3

4

5

6

7 div {

8 width: 100px;

9 height: 100px;

10 background: red;

11 position: relative;

12 animation: myfirst 5s infinite alternate;

13 }

14

15 @keyframes myfirst {

16 0% {

17 background: red;

18 left: 0px;

19 top: 0px;

20 }

21

22 100% {

23 background: blue;

24 left: 200px;

25 top: 0px;

26 }

27

28 }

29 //鼠标划过停止动画效果

30 div:hover{

31 -webkit-animation-play-state:paused;

32 animation-play-state:paused;

33 }

34

35

36

37

38

39

40

标签：css3,100px,paused,animation,自动,background,div,0px

来源： https://www.cnblogs.com/520yh/p/11751576.html