画像自動スライドのanimationを加えたい

今回、以下ソースは別サイトを参照し、画像を＜＞クリックでスライドにしています。
この挙動に、アニメーションで３秒ごとに自動でスライドする挙動も加えたいです。
いろいろ探してみましたが、うまく挙動する方法が見つからず、こちらに失礼します　。
初心者ですいませんが、宜しくお願い致します。

HTML
1<body>
2<div class="carousel-container">
3  <div class="carousel my-carousel carousel--translate">
4    <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
5    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
6    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
7    <div class="carousel__controls">
8      <label class="carousel__control carousel__control--backward" for="J"></label>
9      <label class="carousel__control carousel__control--forward" for="G"></label>
10    </div>
11    <div class="carousel__controls">
12      <label class="carousel__control carousel__control--backward" for="F"></label>
13      <label class="carousel__control carousel__control--forward" for="H"></label>
14    </div>
15    <div class="carousel__controls">
16      <label class="carousel__control carousel__control--backward" for="G"></label>
17      <label class="carousel__control carousel__control--forward" for="I"></label>
18    </div>
19
20    <div class="carousel__track">
21      <li class="carousel__slide">
22        <h1>F</h1>
23      </li>
24      <li class="carousel__slide">
25        <h1>G</h1>
26      </li>
27      <li class="carousel__slide">
28        <h1>H</h1>
29      </li>
30      <li class="carousel__slide">
31        <h1>I</h1>
32      </li>
33      <li class="carousel__slide">
34        <h1>J</h1>
35      </li>
36    </div>
37    <div class="carousel__indicators">
38      <label class="carousel__indicator" for="F"></label>
39      <label class="carousel__indicator" for="G"></label>
40      <label class="carousel__indicator" for="H"></label>
41      <label class="carousel__indicator" for="I"></label>
42      <label class="carousel__indicator" for="J"></label>
43    </div>
44  </div>
45</div>
46</body>

CSS
1
2.carousel {
3  height: 400px;
4  width: 700px;
5  overflow: hidden;
6  text-align: center;
7  position: relative;
8  padding: 0;
9  list-style: none;
10}
11.carousel__controls,
12.carousel__activator {
13  display: none;
14}
15.carousel__activator:nth-of-type(1):checked ~ .carousel__track {
16  -webkit-transform: translateX(0%);
17          transform: translateX(0%);
18}
19.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {
20  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
21  transition: opacity 0.5s, -webkit-transform 0.5s;
22  transition: opacity 0.5s, transform 0.5s;
23  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
24  top: 0;
25  left: 0;
26  right: 0;
27  opacity: 1;
28  -webkit-transform: scale(1);
29          transform: scale(1);
30}
31.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
32  display: block;
33  opacity: 1;
34}
35.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {
36  opacity: 1;
37}
38.carousel__activator:nth-of-type(2):checked ~ .carousel__track {
39  -webkit-transform: translateX(-100%);
40          transform: translateX(-100%);
41}
42.carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {
43  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
44  transition: opacity 0.5s, -webkit-transform 0.5s;
45  transition: opacity 0.5s, transform 0.5s;
46  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
47  top: 0;
48  left: 0;
49  right: 0;
50  opacity: 1;
51  -webkit-transform: scale(1);
52          transform: scale(1);
53}
54.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {
55  display: block;
56  opacity: 1;
57}
58.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {
59  opacity: 1;
60}
61.carousel__activator:nth-of-type(3):checked ~ .carousel__track {
62  -webkit-transform: translateX(-200%);
63          transform: translateX(-200%);
64}
65.carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {
66  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
67  transition: opacity 0.5s, -webkit-transform 0.5s;
68  transition: opacity 0.5s, transform 0.5s;
69  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
70  top: 0;
71  left: 0;
72  right: 0;
73  opacity: 1;
74  -webkit-transform: scale(1);
75          transform: scale(1);
76}
77.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {
78  display: block;
79  opacity: 1;
80}
81.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {
82  opacity: 1;
83}
84.carousel__control {
85  height: 30px;
86  width: 30px;
87  margin-top: -15px;
88  top: 50%;
89  position: absolute;
90  display: block;
91  cursor: pointer;
92  border-width: 5px 5px 0 0;
93  border-style: solid;
94  border-color: black;
95  opacity: 0.35;
96  outline: 0;
97  z-index: 3;
98}
99.carousel__control:hover {
100  opacity: 1;
101}
102.carousel__control--backward {
103  left: 10px;
104  -webkit-transform: rotate(-135deg);
105          transform: rotate(-135deg);
106}
107.carousel__control--forward {
108  right: 10px;
109  -webkit-transform: rotate(45deg);
110          transform: rotate(45deg);
111}
112.carousel__indicators {
113  position: absolute;
114  bottom: 20px;
115  width: 100%;
116  text-align: center;
117}
118.carousel__indicator {
119  height: 15px;
120  width: 15px;
121  border-radius: 100%;
122  display: inline-block;
123  z-index: 2;
124  cursor: pointer;
125  opacity: 0.35;
126  margin: 0 2.5px 0 2.5px;
127}
128.carousel__indicator:hover {
129  opacity: 0.75;
130}
131.carousel__track {
132  position: absolute;
133  top: 0;
134  right: 0;
135  bottom: 0;
136  left: 0;
137  padding: 0;
138  margin: 0;
139  -webkit-transition: -webkit-transform 0.5s ease 0s;
140  transition: -webkit-transform 0.5s ease 0s;
141  transition: transform 0.5s ease 0s;
142  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
143}
144.carousel__track .carousel__slide {
145  display: block;
146  top: 0;
147  left: 0;
148  right: 0;
149  opacity: 1;
150}
151.carousel__track .carousel__slide:nth-of-type(1) {
152  -webkit-transform: translateX(0%);
153          transform: translateX(0%);
154}
155.carousel__track .carousel__slide:nth-of-type(2) {
156  -webkit-transform: translateX(100%);
157          transform: translateX(100%);
158}
159.carousel__track .carousel__slide:nth-of-type(3) {
160  -webkit-transform: translateX(200%);
161          transform: translateX(200%);
162}
163.carousel--scale .carousel__slide {
164  -webkit-transform: scale(0);
165          transform: scale(0);
166}
167.carousel__slide {
168  height: 100%;
169  position: absolute;
170  overflow-y: auto;
171  opacity: 0;
172}
173
174* {
175  box-sizing: border-box;
176}
177.carousel-container {
178  display: inline-block;
179}
180.my-carousel {
181  border-radius: 5px;
182  margin: 30px;
183}
184.carousel__slide {
185  overflow: hidden;
186}
187.carousel--thumb .carousel__indicator {
188  height: 30px;
189  width: 30px;
190}
191.carousel__indicator {
192  background-color: #0A0909;
193}
194.carousel__slide:nth-of-type(1),
195.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
196  background-image:url("https://unsplash.it/300?random");
197  background-size: cover;
198  background-position: center;
199}
200.carousel__slide:nth-of-type(2),
201.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
202  background-image:url("https://unsplash.it/600?random");
203  background-size: cover;
204  background-position: center;
205}
206.carousel__slide:nth-of-type(3),
207.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
208  background-image:url("https://unsplash.it/900?random");
209  background-size: cover;
210  background-position: center;
211}
212