html回弹效果,CSS3 反弹效果

1

2

3

4

5

CSS3-反弹-效果

6

7 .element{

8 color:#f35626;

9 background-image:-webkit-linear-gradient(92deg,#f35626,#feab3a);

10 -webkit-background-clip:text;

11 -webkit-text-fill-color:transparent;

12 -webkit-animation:hue 60s infinite linear;

13 margin-bottom:1.5rem;

14 font-size:3rem;

15 font-weight:100;

16 line-height:1;

17 letter-spacing:-.05em;

18 }

19 .animated{

20 -webkit-animation-duration:1s;

21 animation-duration:1s;

22 -webkit-animation-fill-mode:both;

23 animation-fill-mode:both;

24 }

25 @-webkit-keyframes bounceIn{

26 from, 20%, 40%, 60%, 80%, to {27 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

28 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

29 }

30

31 0%{

32 opacity:0;

33 -webkit-transform:scale3d(.3, .3, .3);

34 transform:scale3d(.3, .3, .3);

35 }

36

37 20%{

38 -webkit-transform:scale3d(1.1, 1.1, 1.1);

39 transform:scale3d(1.1, 1.1, 1.1);

40 }

41

42 40%{

43 -webkit-transform:scale3d(.9, .9, .9);

44 transform:scale3d(.9, .9, .9);

45 }

46

47 60%{

48 opacity:1;

49 -webkit-transform:scale3d(1.03, 1.03, 1.03);

50 transform:scale3d(1.03, 1.03, 1.03);

51 }

52

53 80%{

54 -webkit-transform:scale3d(.97, .97, .97);

55 transform:scale3d(.97, .97, .97);

56 }

57

58 to{

59 opacity:1;

60 -webkit-transform:scale3d(1, 1, 1);

61 transform:scale3d(1, 1, 1);

62 }

63 }64

65 @keyframes bounceIn{

66 from, 20%, 40%, 60%, 80%, to {67 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

68 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

69 }

70

71 0%{

72 opacity:0;

73 -webkit-transform:scale3d(.3, .3, .3);

74 transform:scale3d(.3, .3, .3);

75 }

76

77 20%{

78 -webkit-transform:scale3d(1.1, 1.1, 1.1);

79 transform:scale3d(1.1, 1.1, 1.1);

80 }

81

82 40%{

83 -webkit-transform:scale3d(.9, .9, .9);

84 transform:scale3d(.9, .9, .9);

85 }

86

87 60%{

88 opacity:1;

89 -webkit-transform:scale3d(1.03, 1.03, 1.03);

90 transform:scale3d(1.03, 1.03, 1.03);

91 }

92

93 80%{

94 -webkit-transform:scale3d(.97, .97, .97);

95 transform:scale3d(.97, .97, .97);

96 }

97

98 to{

99 opacity:1;

100 -webkit-transform:scale3d(1, 1, 1);

101 transform:scale3d(1, 1, 1);

102 }

103 }104

105 .bounceIn{

106 -webkit-animation-name:bounceIn;

107 animation-name:bounceIn;

108 }

109

110 @-webkit-keyframes bounceInDown{

111 from, 60%, 75%, 90%, to {112 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

113 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

114 }

115

116 0%{

117 opacity:0;

118 -webkit-transform:translate3d(0, -3000px, 0);

119 transform:translate3d(0, -3000px, 0);

120 }

121

122 60%{

123 opacity:1;

124 -webkit-transform:translate3d(0, 25px, 0);

125 transform:translate3d(0, 25px, 0);

126 }

127

128 75%{

129 -webkit-transform:translate3d(0, -10px, 0);

130 transform:translate3d(0, -10px, 0);

131 }

132

133 90%{

134 -webkit-transform:translate3d(0, 5px, 0);

135 transform:translate3d(0, 5px, 0);

136 }

137

138 to{

139 -webkit-transform:none;

140 transform:none;

141 }

142 }143

144 @keyframes bounceInDown{

145 from, 60%, 75%, 90%, to {146 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

147 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

148 }

149

150 0%{

151 opacity:0;

152 -webkit-transform:translate3d(0, -3000px, 0);

153 transform:translate3d(0, -3000px, 0);

154 }

155

156 60%{

157 opacity:1;

158 -webkit-transform:translate3d(0, 25px, 0);

159 transform:translate3d(0, 25px, 0);

160 }

161

162 75%{

163 -webkit-transform:translate3d(0, -10px, 0);

164 transform:translate3d(0, -10px, 0);

165 }

166

167 90%{

168 -webkit-transform:translate3d(0, 5px, 0);

169 transform:translate3d(0, 5px, 0);

170 }

171

172 to{

173 -webkit-transform:none;

174 transform:none;

175 }

176 }177

178 .bounceInDown{

179 -webkit-animation-name:bounceInDown;

180 animation-name:bounceInDown;

181 }

182

183 @-webkit-keyframes bounceInLeft{

184 from, 60%, 75%, 90%, to {185 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

186 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

187 }

188

189 0%{

190 opacity:0;

191 -webkit-transform:translate3d(-3000px, 0, 0);

192 transform:translate3d(-3000px, 0, 0);

193 }

194

195 60%{

196 opacity:1;

197 -webkit-transform:translate3d(25px, 0, 0);

198 transform:translate3d(25px, 0, 0);

199 }

200

201 75%{

202 -webkit-transform:translate3d(-10px, 0, 0);

203 transform:translate3d(-10px, 0, 0);

204 }

205

206 90%{

207 -webkit-transform:translate3d(5px, 0, 0);

208 transform:translate3d(5px, 0, 0);

209 }

210

211 to{

212 -webkit-transform:none;

213 transform:none;

214 }

215 }216

217 @keyframes bounceInLeft{

218 from, 60%, 75%, 90%, to {219 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

220 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

221 }

222

223 0%{

224 opacity:0;

225 -webkit-transform:translate3d(-3000px, 0, 0);

226 transform:translate3d(-3000px, 0, 0);

227 }

228

229 60%{

230 opacity:1;

231 -webkit-transform:translate3d(25px, 0, 0);

232 transform:translate3d(25px, 0, 0);

233 }

234

235 75%{

236 -webkit-transform:translate3d(-10px, 0, 0);

237 transform:translate3d(-10px, 0, 0);

238 }

239

240 90%{

241 -webkit-transform:translate3d(5px, 0, 0);

242 transform:translate3d(5px, 0, 0);

243 }

244

245 to{

246 -webkit-transform:none;

247 transform:none;

248 }

249 }250

251 .bounceInLeft{

252 -webkit-animation-name:bounceInLeft;

253 animation-name:bounceInLeft;

254 }

255

256 @-webkit-keyframes bounceInRight{

257 from, 60%, 75%, 90%, to {258 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

259 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

260 }

261

262 from{

263 opacity:0;

264 -webkit-transform:translate3d(3000px, 0, 0);

265 transform:translate3d(3000px, 0, 0);

266 }

267

268 60%{

269 opacity:1;

270 -webkit-transform:translate3d(-25px, 0, 0);

271 transform:translate3d(-25px, 0, 0);

272 }

273

274 75%{

275 -webkit-transform:translate3d(10px, 0, 0);

276 transform:translate3d(10px, 0, 0);

277 }

278

279 90%{

280 -webkit-transform:translate3d(-5px, 0, 0);

281 transform:translate3d(-5px, 0, 0);

282 }

283

284 to{

285 -webkit-transform:none;

286 transform:none;

287 }

288 }289

290 @keyframes bounceInRight{

291 from, 60%, 75%, 90%, to {292 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

293 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

294 }

295

296 from{

297 opacity:0;

298 -webkit-transform:translate3d(3000px, 0, 0);

299 transform:translate3d(3000px, 0, 0);

300 }

301

302 60%{

303 opacity:1;

304 -webkit-transform:translate3d(-25px, 0, 0);

305 transform:translate3d(-25px, 0, 0);

306 }

307

308 75%{

309 -webkit-transform:translate3d(10px, 0, 0);

310 transform:translate3d(10px, 0, 0);

311 }

312

313 90%{

314 -webkit-transform:translate3d(-5px, 0, 0);

315 transform:translate3d(-5px, 0, 0);

316 }

317

318 to{

319 -webkit-transform:none;

320 transform:none;

321 }

322 }323

324 .bounceInRight{

325 -webkit-animation-name:bounceInRight;

326 animation-name:bounceInRight;

327 }

328

329 @-webkit-keyframes bounceInUp{

330 from, 60%, 75%, 90%, to {331 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

332 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

333 }

334

335 from{

336 opacity:0;

337 -webkit-transform:translate3d(0, 3000px, 0);

338 transform:translate3d(0, 3000px, 0);

339 }

340

341 60%{

342 opacity:1;

343 -webkit-transform:translate3d(0, -20px, 0);

344 transform:translate3d(0, -20px, 0);

345 }

346

347 75%{

348 -webkit-transform:translate3d(0, 10px, 0);

349 transform:translate3d(0, 10px, 0);

350 }

351

352 90%{

353 -webkit-transform:translate3d(0, -5px, 0);

354 transform:translate3d(0, -5px, 0);

355 }

356

357 to{

358 -webkit-transform:translate3d(0, 0, 0);

359 transform:translate3d(0, 0, 0);

360 }

361 }362

363 @keyframes bounceInUp{

364 from, 60%, 75%, 90%, to {365 -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

366 animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);

367 }

368

369 from{

370 opacity:0;

371 -webkit-transform:translate3d(0, 3000px, 0);

372 transform:translate3d(0, 3000px, 0);

373 }

374

375 60%{

376 opacity:1;

377 -webkit-transform:translate3d(0, -20px, 0);

378 transform:translate3d(0, -20px, 0);

379 }

380

381 75%{

382 -webkit-transform:translate3d(0, 10px, 0);

383 transform:translate3d(0, 10px, 0);

384 }

385

386 90%{

387 -webkit-transform:translate3d(0, -5px, 0);

388 transform:translate3d(0, -5px, 0);

389 }

390

391 to{

392 -webkit-transform:translate3d(0, 0, 0);

393 transform:translate3d(0, 0, 0);

394 }

395 }396

397 .bounceInUp{

398 -webkit-animation-name:bounceInUp;

399 animation-name:bounceInUp;

400 }

401

402 @-webkit-keyframes bounceOut{

403 20% {404 -webkit-transform:scale3d(.9, .9, .9);

405 transform:scale3d(.9, .9, .9);

406 }

407

408 50%, 55%{

409 opacity:1;

410 -webkit-transform:scale3d(1.1, 1.1, 1.1);

411 transform:scale3d(1.1, 1.1, 1.1);

412 }

413

414 to{

415 opacity:0;

416 -webkit-transform:scale3d(.3, .3, .3);

417 transform:scale3d(.3, .3, .3);

418 }

419 }420

421 @keyframes bounceOut{

422 20% {423 -webkit-transform:scale3d(.9, .9, .9);

424 transform:scale3d(.9, .9, .9);

425 }

426

427 50%, 55%{

428 opacity:1;

429 -webkit-transform:scale3d(1.1, 1.1, 1.1);

430 transform:scale3d(1.1, 1.1, 1.1);

431 }

432

433 to{

434 opacity:0;

435 -webkit-transform:scale3d(.3, .3, .3);

436 transform:scale3d(.3, .3, .3);

437 }

438 }439

440 .bounceOut{

441 -webkit-animation-name:bounceOut;

442 animation-name:bounceOut;

443 }

444

445 @-webkit-keyframes bounceOutDown{

446 20% {447 -webkit-transform:translate3d(0, 10px, 0);

448 transform:translate3d(0, 10px, 0);

449 }

450

451 40%, 45%{

452 opacity:1;

453 -webkit-transform:translate3d(0, -20px, 0);

454 transform:translate3d(0, -20px, 0);

455 }

456

457 to{

458 opacity:0;

459 -webkit-transform:translate3d(0, 2000px, 0);

460 transform:translate3d(0, 2000px, 0);

461 }

462 }463

464 @keyframes bounceOutDown{

465 20% {466 -webkit-transform:translate3d(0, 10px, 0);

467 transform:translate3d(0, 10px, 0);

468 }

469

470 40%, 45%{

471 opacity:1;

472 -webkit-transform:translate3d(0, -20px, 0);

473 transform:translate3d(0, -20px, 0);

474 }

475

476 to{

477 opacity:0;

478 -webkit-transform:translate3d(0, 2000px, 0);

479 transform:translate3d(0, 2000px, 0);

480 }

481 }482

483 .bounceOutDown{

484 -webkit-animation-name:bounceOutDown;

485 animation-name:bounceOutDown;

486 }

487

488 @-webkit-keyframes bounceOutLeft{

489 20% {490 opacity:1;

491 -webkit-transform:translate3d(20px, 0, 0);

492 transform:translate3d(20px, 0, 0);

493 }

494

495 to{

496 opacity:0;

497 -webkit-transform:translate3d(-2000px, 0, 0);

498 transform:translate3d(-2000px, 0, 0);

499 }

500 }501

502 @keyframes bounceOutLeft{

503 20% {504 opacity:1;

505 -webkit-transform:translate3d(20px, 0, 0);

506 transform:translate3d(20px, 0, 0);

507 }

508

509 to{

510 opacity:0;

511 -webkit-transform:translate3d(-2000px, 0, 0);

512 transform:translate3d(-2000px, 0, 0);

513 }

514 }515

516 .bounceOutLeft{

517 -webkit-animation-name:bounceOutLeft;

518 animation-name:bounceOutLeft;

519 }

520

521 @-webkit-keyframes bounceOutRight{

522 20% {523 opacity:1;

524 -webkit-transform:translate3d(-20px, 0, 0);

525 transform:translate3d(-20px, 0, 0);

526 }

527

528 to{

529 opacity:0;

530 -webkit-transform:translate3d(2000px, 0, 0);

531 transform:translate3d(2000px, 0, 0);

532 }

533 }534

535 @keyframes bounceOutRight{

536 20% {537 opacity:1;

538 -webkit-transform:translate3d(-20px, 0, 0);

539 transform:translate3d(-20px, 0, 0);

540 }

541

542 to{

543 opacity:0;

544 -webkit-transform:translate3d(2000px, 0, 0);

545 transform:translate3d(2000px, 0, 0);

546 }

547 }548 .bounceOutRight{

549 -webkit-animation-name:bounceOutRight;

550 animation-name:bounceOutRight;

551 }

552 @-webkit-keyframes bounceOutUp{

553 20% {554 -webkit-transform:translate3d(0, -10px, 0);

555 transform:translate3d(0, -10px, 0);

556 }

557

558 40%, 45%{

559 opacity:1;

560 -webkit-transform:translate3d(0, 20px, 0);

561 transform:translate3d(0, 20px, 0);

562 }

563

564 to{

565 opacity:0;

566 -webkit-transform:translate3d(0, -2000px, 0);

567 transform:translate3d(0, -2000px, 0);

568 }

569 }570 @keyframes bounceOutUp{

571 20% {572 -webkit-transform:translate3d(0, -10px, 0);

573 transform:translate3d(0, -10px, 0);

574 }

575

576 40%, 45%{

577 opacity:1;

578 -webkit-transform:translate3d(0, 20px, 0);

579 transform:translate3d(0, 20px, 0);

580 }

581

582 to{

583 opacity:0;

584 -webkit-transform:translate3d(0, -2000px, 0);

585 transform:translate3d(0, -2000px, 0);

586 }

587 }588

589 .bounceOutUp{

590 -webkit-animation-name:bounceOutUp;

591 animation-name:bounceOutUp;

592 }

593

594

595

596 bounceIn