CSS3中怎么利用animation实现幻灯片轮播特效

CSS3 中怎么利用animation实现幻灯片轮播特效，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联是一家集网站建设,灵石企业网站建设,灵石品牌网站建设,网站定制,灵石网站建设报价,网络营销,网络优化,灵石网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

代码

1.   

2.   

3.   

4.   

5.       

6.       

7.       

8.         .items {   

9.             width: 280px;   

10.             height: 150px;   

11.             border: 1px solid #ddd;   

12.                 box-sizing: border-box;   

13.                 border-radius:10px;   

14.                 background-size: cover;   

15.             -webkit-transform: translateZ(0);   

16.             transform: translateZ(0);   

17.                 background-repeat: no-repeat;   

18.             -webkit-animation: slider 15s linear infinite alternate;   

19.             animation: slider 15s linear infinite alternate;   

20.             -webkit-transform-origin: center center;   

21.                     transform-origin: center center;   

22.   

23.         }   

24.   

25.   

26.   

27.         @-webkit-keyframes slider {   

28.             0% {   

29.                 background-image: url(1.jpg) ;   

30.             }   

31.             25% {   

32.                 background-image: url(2.jpg) ;   

33.   

34.             }   

35.             50% {   

36.                 background-image: url(3.jpg) ;   

37.   

38.             }   

39.             75% {   

40.                 background-image: url(4.jpg);   

41.   

42.             }   

43.             100% {   

44.                 background-image: url(5.jpg);   

45.   

46.             }   

47.         }   

48. @keyframes slider {   

49.             0% {   

50.                 background-image: url(1.jpg) ;   

51.   

52.             }   

53.             25% {   

54.                 background-image: url(2.jpg) ;   

55.   

56.             }   

57.             50% {   

58.                 background-image: url(3.jpg) ;   

59.   

60.             }   

61.             75% {   

62.                 background-image: url(4.jpg);   

63.   

64.             }   

65.             100% {   

66.                 background-image: url(5.jpg);   

67.   

68.             }   

69.         }   

70.   

71.   

72.       

73.   

74.   

75.   

76.       

77.