老师，帮我看下错在哪里了

老师，第一屏和第二屏动画都不对，能帮忙看下哪里错了吗

html部分

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<!--导航条区域-->
<header class="header">
    <div class="header__wrap">
        <div class="header__logo">H5实战页面</div>
        <nav class="header__nav">
            <a href="javascript:;" class="header__nav-item  header__nav-item_status_active">实战课程</a>
            <a href="javascript:;" class="header__nav-item">商业案例</a>
            <a href="javascript:;" class="header__nav-item">课程体系</a>
            <a href="javascript:;" class="header__nav-item">集成环境</a>
            <a href="javascript:;" class="header__nav-item">云端学习</a>
            <a href="javascript:;" class="header__nav-item  header__nav-item_custom_button">即刻学习</a>
            <div class="header__nav-tip"></div>
        </nav>
    </div>
</header>
<div class="screen-1">
        <h2 class="screen-1__heading  screen-1__heading_animate_init">实战课程重磅上线</h2>
        <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习，还在等什么？</h3>
    </div>
    <div class="screen-2">
        <h2 class="screen-2__heading">每门课都是真实商业案例</h2>
        <h3 class="screen-2__subheading">真实案例、真实场景，在实战中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发过程——为你呈现</h3>
        <div class="screen-2__BAT">
         <div class="screen-2__point1"></div>
            <div class="screen-2__point2"></div>
        </div>
    </div>
    <div class="screen-3">
     <div class="screen-3__bg screen-3__bg_animate_init"></div>
        <div class="screen-3__wrap">
            <h2 class="screen-3__heading screen-3__heading_animate_init">强大的语言课程体系支持</h2>
            <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运营，一站式解决<br> 让你体验开发全流程</h3>
            <div class="screen-3__features">
                <div class="screen-3__features__item  screen-3__features__item1">
                    <div class="screen-3__features__item__number">HTML5</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item2">
                    <div class="screen-3__features__item__number">PHP</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item3">
                    <div class="screen-3__features__item__number">JAVA</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item4">
                    <div class="screen-3__features__item__number">Python</div>
                </div>
                <div class="screen-3__features__item  screen-3__features__item5">
                    <div class="screen-3__features__item__number">Node.js</div>
                </div>
            </div>
        </div>
    </div>
    <div class="screen-4">
        <div class="screen-4__wrap">
            <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2>
            <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
            <div class="screen-4__type">
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img1"></div>
                    <div class="screen-4__type__item__txt">实战课程集成开发环境</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img2"></div>
                    <div class="screen-4__type__item__txt">内置终端命令行</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img3"></div>
                    <div class="screen-4__type__item__txt">编译你的应用程序</div>
                </div>
                <div class="screen-4__type__item">
                 <div class="screen-4__type__item_img  screen-4__type__item_img4"></div>
                    <div class="screen-4__type__item__txt">通过云端服务输出效果</div>
                </div>
            </div>
        </div>
    </div>
    <div class="screen-5">
     <div class="screen-5__pic"></div>
        <h2 class="screen-5__heading">云端学习可以这样简单</h2>
        <h3 class="screen-5__subheading">看视频，敲代码一气呵成，结合慕课网为您提供的云端学习工具，所见即所得。从此学习不一样</h3>
    </div>
    <div class="screen-learn">
     <a class="screen-learn-button" href="javascript:;">继续了解学习体验</a>
    </div>
    <footer class="footer">
     <ul class="footer__nav">
     <li class="footer__nav__item">网站首页</li>
     <li class="footer__nav__item">人才招聘</li>
     <li class="footer__nav__item">联系我们</li>
     <li class="footer__nav__item">高校联盟</li>
     <li class="footer__nav__item">关于我们</li>
     <li class="footer__nav__item">讲师招聘</li>
     <li class="footer__nav__item">意见反馈</li>
     <li class="footer__nav__item">友情链接</li>
     </ul>
     <p>© 2015 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
    </footer>
    <div class="outline">
        <a href="javascript:;" class="outline__item">实</a>
        <a href="javascript:;" class="outline__item">商</a>
        <a href="javascript:;" class="outline__item">课</a>
        <a href="javascript:;" class="outline__item">集</a>
        <a href="javascript:;" class="outline__item">云</a>
    </div>  
</body>
</html>

animate.css部分

.screen-1__heading,
.screen-1__subheading{
    transition: all 1s;
}
.screen-1__subheading{
    transition-delay:1s;
}
.screen-1__heading_animate_init,
.screen-1__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
/*第二屏动画*/
.screen-2__heading,
.screen-2__subheading,
.screen-2__point1{
    transition: all 1s;
}
.screen-2__heading_animate_init,
.screen-2__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__heading_animate_done,
.screen-2__subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point2_animate_init{
    opacity: 0;
}
.screen-2__point2_animate_done{
    opacity: 1;
}

index.css部分

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

/*头部*/
.header__wrap{
    width:1200px;
    height: 40px;
    margin: 10px auto;
    position: relative;
    z-index: 3;
}
.header__logo{
    width: 150px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #fff;
    text-indent: 50px;
    background: url('../img/logo.png') left center no-repeat;
    background-size: 38px 38px;
    font-weight: bold;
    margin-left: -65px;
}
.header__nav{
    position: absolute;
    right: -70px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
.header__nav-item{
    color: #fff;
    font-size: 14px;
    display: block;
    height: 40px;
    line-height: 40px;
    float: left;
    position: relative;
    width: 60px;
    text-align: center;
    margin: 0 20px;
}
.header__nav-item:hover{
    font-weight: bold;
}
.header__nav-item_status_active{
    font-weight: bold;
}
.header__nav-item_status_active::after{
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background-color:#f01400; 
    left: 0;
    bottom: 0;
}
.header__nav-item_custom_button{
    background: red;
    text-align: center;
    width: 85px;
    border-radius: 5px;
    padding: 0;
}
 
/*第一屏*/
.screen-1{
    height: 640px;
    overflow: hidden;
    background:url(../img/sc1.jpg) no-repeat center;
    background-size: cover;
    margin: 0 auto;
    margin-top: -60px;
}
.screen-1__heading{
    color: #fff;
    text-align: center;
    font-size: 30px;
    margin-top: 240px;
}
.screen-1__subheading{
    color: #fff;
    text-align: center;
    font-weight: normal;
}
 
/*第二屏*/
.screen-2{
    height: 640px;
    position: relative;
    overflow: hidden;
    background-color: #f3f5f7;
    margin: 0 auto;
}
.screen-2__heading{
    font-size:36px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding-top: 90px;
}
.screen-2__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    top: 167px;
    left: 50%;
    margin-left: -20px;
}
.screen-2__subheading{
    font-size:14px;
    color: #000;
    text-align: center;
    padding-top: 35px;
    line-height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -189px;
    top: 165px;
}
.screen-2__BAT{
    width: 750px;
    height: 361px;
    background:url(../img/sc2.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -375px;
}
.screen-2__point1{
    width: 266px;
    height: 205px;
    background: url(../img/sc2-2.png) no-repeat center;
    position: absolute;
    left: 340px;
    top: 400px;
}
.screen-2__point2{
    width: 275px;
    height: 380px;
    background: url(../img/sc2-1.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -137px;
    bottom: 0;
}
 
/*第三屏*/
.screen-3{
    height: 640px;
    position: relative;
    overflow: hidden;
    background-color: #2b333b;
    margin: 0 auto;
}
.screen-3__bg{
    width: 580px;
    height: 640px;
    background: url(../img/sc3.png) no-repeat center;
    float: left;
    margin-left: 50px;
    background-size: cover;
}
.screen-3__heading{
    font-size: 36px;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 700px;
    top: 200px;
}
.screen-3__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #f01400; 
    top: 80px;
    left: 5px;
}
.screen-3__subheading{
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 700px;
    top: 320px;
}
.screen-3__features{
    width: 600px;
    height: 80px;
    position: absolute;
    left: 700px;
    top: 500px; 
}
.screen-3__features__item{
    width:60px;
    height:60px;
    border-radius:100px;
    float: left;
    margin-right: 30px;
}
.screen-3__features__item1{
    border:6px solid rgba(2,176,255,.5);
}
.screen-3__features__item2{
    border:6px solid rgba(79,125,253,.5);
}
.screen-3__features__item3{
    border:6px solid rgba(255,96,96,.5);
}
.screen-3__features__item4{
    border:6px solid rgba(34,199,229,.5);
}
.screen-3__features__item5{
    border:6px solid rgba(144,189,86,.5);
}
.screen-3__features__item:nth-child(1){
    color: rgba(2,176,255);
}
.screen-3__features__item:nth-child(2){
    color: rgba(79,125,253);
}
.screen-3__features__item:nth-child(3){
    color: rgba(255,96,96);
}
.screen-3__features__item:nth-child(4){
    color: rgba(34,199,229);
}
.screen-3__features__item:nth-child(5){
    color: rgba(144,189,86);
}
.screen-3__features__item__number{
    line-height: 60px;
    text-align: center; 
}
 
/*第四屏*/
.screen-4{
    background-color: #f3f5f7;
    height: 640px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.screen-4__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
 
}
.screen-4__heading{
    font-size: 36px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding-top: 120px;
}
.screen-4__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    top: 187px;
    left: 50%;
    margin-left: -20px;
}
.screen-4__subheading{
    font-size: 14px;
    color: #000;
    padding-top: 35px;
    line-height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -109px;
    top: 185px;
}
.screen-4__type{
    width: 1065px;
    height: 120px;
    position: absolute;
    top: 354px;
    left: 25%;
}
.screen-4__type__item{
    width: 170px;
    height: 123px;
    float: left;
}
.screen-4__type__item_img{
    width: 80px;
    height: 97px;
    margin: 0 auto;
}
.screen-4__type__item_img1{
 
    background: url('../img/sc4-1.png') no-repeat left top;
}
.screen-4__type__item_img2{
 
    background: url('../img/sc4-2.png') no-repeat left top;
}
.screen-4__type__item_img3{
 
    background: url('../img/sc4-3.png') no-repeat left top;
}
.screen-4__type__item_img4{
 
    background: url('../img/sc4-4.png') no-repeat left top;
}
.screen-4__type__item__txt{
    text-align: center;
}
 
/*第五屏*/
.screen-5{
    height: 640px;
    position: relative;
    overflow: hidden;
    background: url('../img/sc5.jpg') no-repeat center;
    margin: 0 auto;
}
.screen-5__pic{
    width: 200px;
    height: 200px;
    background: url('../img/sc5-1.png')  no-repeat center;
    margin: 100px auto 0;
}
.screen-5__heading{
    font-size: 36px;
    line-height: 36px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
}
.screen-5__heading::after{
    content: ' ';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #fff;
    top: 430px;
    left: 50%;
    margin-left: -20px;
}
.screen-5__subheading{
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding-top: 65px;
}
 
/*第六屏*/
.screen-learn{
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.screen-learn-button{
    border:1px solid rgba(112,112,112,.5);
    font-size: 20px;
    color: #000;
    padding: 20px 30px;
    position: absolute;
    top: 67px;
    left: 50%;
    margin-left: -117px;
    border-radius: 5px;
}
.screen-learn-button:hover{
    background-color: red;
    color: #fff;
    border: none;
}
 
/*尾部*/
.footer{
    height: 100px;
    background-color: #000;
    position: relative;
    margin: 0 auto;
}
.footer__nav{
    width: 670px;
    height: 30px;
    position: absolute;
    top: 18px;
    left: 50%;
    margin-left: -355px;
}
.footer__nav__item{
    color: #fff;
    float: left;
    margin-right: 35px;
}
.footer__nav__item:hover{
    color: red;
    cursor: pointer; 
}
.footer p{
    color: #c8cdd2;
    font-size: 16px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -236px;
}
 
/*侧边条*/
.outline {
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
    z-index: 3;
}
.outline__item {
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    padding: 5px 0;
    background: rgb(255,255,255);
    margin: 5px 0px 0px;
    border-top: 1px solid #eee;
    text-align: center;
    color: #93999f;
}
.outline__item:first-child{
    border:none;
}
.outline__item:hover,
.outline__item_status_active{
    color: #f00;
}

base.css部分

body{
    background-color: #fff; 
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Microsoft Yahei",微软雅黑
}
a{
    text-decoration: none;
}
h2,h3{
    margin: 0;
    padding: 0;
    font-weight: normal;
}
ul,li{
    list-style: none;
}
p{
    margin: 0;
    padding: 0;
}