Stacked Animated UI Level using CSS

by css3transitionAugust 21, 2017March 13, 2020

Hi all, today I am sharing with you a very attractive Stacked Animated UI Level using CSS. Here you will get a multilayer structure on which when you click on arrow button UI Levels will switch or interchange their postion. It is a pure css Fluent UI Card Animation.

Before going any brief about this I will let you know our most popular article quick view which is Material Design Sign Up Form and Styling elements based on sibling count, hope you will like it too.

It is a fluent design Inpired stacking different Structure with Each Other which is designed in pure css. As you know when you click on arrow icon bottom and top layer will switch their postion, top card will go bottom and bottom card will be on top. This process is repeatable on each click on arrow button.

This layer switching animation being done with only css by using hidden input to perform active and non-active layer by help of :pseudo code.

Lets start with the code as given below:

Markup structure (HTML):

<div class="container">
  <input type="radio" class="is-hidden" id="component@profile-card-radio-1" name="profile-card-radio-group" />

  <section class="component@profile-card" id="component@profile-card-1">

    <header class="component@profile-card__header">
      
      <label for="component@profile-card-radio-1" class="component@profile-card__link object@sticker"><img src="svg/next.svg" class="svg-icon"></label>
      <div class="object@sticker component@profile-card__link">
        <img src="svg/shopping-bag.svg" class="svg-icon">
      </div>
      <div class="object@sticker component@profile-card__link">
       <img src="svg/startup.svg" class="svg-icon">
      </div>
      
    </header>

    <article class="component@profile-card__body">

      <h2 class="component@profile-card__title">Messages</h2>

      <div class="object@media-object">
        
        <img src="http://lorempixel.com/48/48/people/" class="object@media-object__img" />
        
        <div class="object@media-object__body">
          <h4 class="object@media-object__heading">Css Animation</h4>
          <h5 class="object@media-object__subheading">January 23rd, 2017</h5>
          <p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>
        </div>
        
      </div>
      
      <div class="object@media-object">
        <img src="http://lorempixel.com/48/48/people/" class="object@media-object__img" />
        <div class="object@media-object__body">
          <h4 class="object@media-object__heading">Transform Effect</h4>
          <h5 class="object@media-object__subheading">January 23rd, 2017</h5>
          <p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>
        </div>
      </div>
      
    </article>

    <div class="component@profile-card__blur"></div>
  </section>

  <input type="radio" class="is-hidden" id="component@profile-card-radio-2" name="profile-card-radio-group" checked />
  <section class="component@profile-card" id="component@profile-card-2">

    <header class="component@profile-card__header">
      <label for="component@profile-card-radio-2" class="component@profile-card__link object@sticker"><img src="svg/next.svg" class="svg-icon"></label>
      <div class="object@sticker component@profile-card__link">
       <img src="svg/refresh.svg" class="svg-icon">
      </div>
      <div class="object@sticker component@profile-card__link">
       <img src="svg/computer.svg" class="svg-icon">
      </div>
    </header>

    <article class="component@profile-card__body">
      <h2 class="component@profile-card__title">Checkout</h2>
      <p class="helper@margin-top--none">Complete checkout?</p>
    </article>

    <div class="component@profile-card__blur"></div>
  </section>
</div>

</div>

</div>

</header>

<h2 class="component@profile-card__title">Messages</h2>

<h4 class="object@media-object__heading">Css Animation</h4>

<h5 class="object@media-object__subheading">January 23rd, 2017</h5>

<p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>

</div>

<h4 class="object@media-object__heading">Transform Effect</h4>

<h5 class="object@media-object__subheading">January 23rd, 2017</h5>

<p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>

</div>

</article>

</section>

</div>

</div>

</header>

<h2 class="component@profile-card__title">Checkout</h2>

<p class="helper@margin-top--none">Complete checkout?</p>

</article>

</section>

</div>

CSS Code For Animation:

.component\@profile-card {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 8px 10px 66px 1px rgba(0, 0, 0, 0.2), -1px -1px 0px 1px white, -1px -1px 0px 1px white, inset 2px 0px 0px white;
  position: relative;
  height: 400px;
  width: 100%;
  z-index: 1;
}
@media (min-width: 480px) {
  .component\@profile-card {
    width: 460px;
  }
}
.component\@profile-card__blur {
  background: url("http://lorempixel.com/1200/1200/nature/3") no-repeat center center fixed;
  background-size: cover;
  filter: blur(13px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.component\@profile-card__header {
  background: rgba(255, 255, 255, 0.7);
  width: 90px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.component\@profile-card__body {
  background: rgba(247, 247, 247, 0.6);
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 24px 24px 114px;
  z-index: 1;
}
.component\@profile-card__title {
  letter-spacing: 2px;
  margin-bottom: 36px;
}
.component\@profile-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  transition: ease 0.2s background;
  z-index: 2;
}
.component\@profile-card__link:hover {
  background: #d1d1d1;
}
.component\@profile-card__img {
  margin: 0 auto;
}

.object\@sticker {
  position: relative;
}
.object\@sticker__item {
  color: #303030;
  font-size: 36px;
  display: flex;
  justify-content: center;
  background-clip: text;
}

.object\@media-object {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
}
.object\@media-object:first-of-type {
  margin-top: 0;
}
.object\@media-object__img {
  margin-right: 1em;
}
.object\@media-object__body {
  flex: 1;
}
.object\@media-object__heading {
  margin: 0;
}
.object\@media-object__subheading {
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 6px;
}
.object\@media-object__text {
  margin: 0;
  font-weight: 200;
}

.helper\@margin-top--none {
  margin-top: 0;
}

#component\@profile-card-radio-2 {
  transition: ease all 1s;
}
#component\@profile-card-radio-2:checked ~ #component\@profile-card-2 {
  position: absolute;
  left: 50px;
  top: 24px;
  opacity: 0.6;
  transition: ease top 1s, ease opacity 1s;
  transition-delay: 2s;
  transform: scale(1);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
  z-index: 0;
  animation: primary 0.5s ease;
}
#component\@profile-card-radio-2:checked ~ #component\@profile-card-1 {
  top: 0;
}

#component\@profile-card-radio-1 {
  transition: ease all 1s;
}
#component\@profile-card-radio-1:checked ~ #component\@profile-card-1 {
  position: absolute;
  left: 50px;
  top: 24px;
  opacity: 0.6;
  transition: ease top 1s, ease opacity 1s;
  transition-delay: 2s;
  transform: scale(1);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
  z-index: 0;
  animation: primary 0.5s ease;
}
#component\@profile-card-radio-1:checked ~ #component\@profile-card-2 {
  top: 0;
}

@keyframes primary {
  0% {
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 2;
  }
  1% {
    position: absolute;
    left: 9.5px;
    z-index: 2;
  }
  2% {
    position: absolute;
    left: 19px;
    z-index: 2;
  }
  3% {
    position: absolute;
    left: 28.5px;
    z-index: 2;
  }
  4% {
    position: absolute;
    left: 38px;
    z-index: 2;
  }
  5% {
    position: absolute;
    left: 47.5px;
    z-index: 2;
  }
  6% {
    position: absolute;
    left: 57px;
    z-index: 2;
  }
  7% {
    position: absolute;
    left: 66.5px;
    z-index: 2;
  }
  8% {
    position: absolute;
    left: 76px;
    z-index: 2;
  }
  9% {
    position: absolute;
    left: 85.5px;
    z-index: 2;
  }
  10% {
    position: absolute;
    left: 95px;
    z-index: 2;
  }
  11% {
    position: absolute;
    left: 104.5px;
    z-index: 2;
  }
  12% {
    position: absolute;
    left: 114px;
    z-index: 2;
  }
  13% {
    position: absolute;
    left: 123.5px;
    z-index: 2;
  }
  14% {
    position: absolute;
    left: 133px;
    z-index: 2;
  }
  15% {
    position: absolute;
    left: 142.5px;
    z-index: 2;
  }
  16% {
    position: absolute;
    left: 152px;
    z-index: 2;
  }
  17% {
    position: absolute;
    left: 161.5px;
    z-index: 2;
  }
  18% {
    position: absolute;
    left: 171px;
    z-index: 2;
  }
  19% {
    position: absolute;
    left: 180.5px;
    z-index: 2;
  }
  20% {
    position: absolute;
    left: 190px;
    z-index: 2;
  }
  21% {
    position: absolute;
    left: 199.5px;
    z-index: 2;
  }
  22% {
    position: absolute;
    left: 209px;
    z-index: 2;
  }
  23% {
    position: absolute;
    left: 218.5px;
    z-index: 2;
  }
  24% {
    position: absolute;
    top: 24;
    left: 228px;
    z-index: 2;
  }
  25% {
    position: absolute;
    left: 237.5px;
    z-index: 2;
  }
  26% {
    position: absolute;
    left: 247px;
    z-index: 2;
  }
  27% {
    position: absolute;
    left: 256.5px;
    z-index: 2;
  }
  28% {
    position: absolute;
    left: 266px;
    z-index: 2;
  }
  29% {
    position: absolute;
    left: 275.5px;
    z-index: 2;
  }
  30% {
    position: absolute;
    left: 285px;
    z-index: 2;
  }
  31% {
    position: absolute;
    left: 294.5px;
    z-index: 2;
  }
  32% {
    position: absolute;
    left: 304px;
    z-index: 2;
  }
  33% {
    position: absolute;
    left: 313.5px;
    z-index: 2;
  }
  34% {
    position: absolute;
    left: 323px;
    z-index: 2;
  }
  35% {
    position: absolute;
    left: 332.5px;
    z-index: 2;
  }
  36% {
    position: absolute;
    left: 342px;
    z-index: 2;
  }
  37% {
    position: absolute;
    left: 351.5px;
    z-index: 2;
  }
  38% {
    position: absolute;
    left: 361px;
    z-index: 2;
  }
  39% {
    position: absolute;
    left: 370.5px;
    z-index: 2;
  }
  40% {
    position: absolute;
    left: 380px;
    z-index: 2;
  }
  41% {
    position: absolute;
    left: 389.5px;
    z-index: 2;
  }
  42% {
    position: absolute;
    left: 399px;
    z-index: 2;
  }
  43% {
    position: absolute;
    left: 408.5px;
    z-index: 2;
  }
  44% {
    position: absolute;
    left: 418px;
    z-index: 2;
  }
  45% {
    position: absolute;
    left: 427.5px;
    z-index: 2;
  }
  46% {
    position: absolute;
    left: 437px;
    z-index: 2;
  }
  47% {
    position: absolute;
    left: 446.5px;
    z-index: 2;
  }
  48% {
    position: absolute;
    top: 48;
    left: 456px;
    z-index: 2;
  }
  49% {
    position: absolute;
    left: 465.5px;
    z-index: 2;
  }
  50% {
    position: absolute;
    left: 475px;
    z-index: 2;
  }
  51% {
    position: absolute;
    left: 465px;
    transform: scale(1);
    z-index: 0;
  }
  52% {
    position: absolute;
    left: 455px;
    transform: scale(1);
    z-index: 0;
  }
  53% {
    position: absolute;
    left: 445px;
    transform: scale(1);
    z-index: 0;
  }
  54% {
    position: absolute;
    left: 435px;
    transform: scale(1);
    z-index: 0;
  }
  55% {
    position: absolute;
    left: 425px;
    transform: scale(1);
    z-index: 0;
  }
  56% {
    position: absolute;
    left: 415px;
    transform: scale(1);
    z-index: 0;
  }
  57% {
    position: absolute;
    left: 405px;
    transform: scale(1);
    z-index: 0;
  }
  58% {
    position: absolute;
    left: 395px;
    transform: scale(1);
    z-index: 0;
  }
  59% {
    position: absolute;
    left: 385px;
    transform: scale(1);
    z-index: 0;
  }
  60% {
    position: absolute;
    left: 375px;
    transform: scale(1);
    z-index: 0;
  }
  61% {
    position: absolute;
    left: 365px;
    transform: scale(1);
    z-index: 0;
  }
  62% {
    position: absolute;
    left: 355px;
    transform: scale(1);
    z-index: 0;
  }
  63% {
    position: absolute;
    left: 345px;
    transform: scale(1);
    z-index: 0;
  }
  64% {
    position: absolute;
    left: 335px;
    transform: scale(1);
    z-index: 0;
  }
  65% {
    position: absolute;
    left: 325px;
    transform: scale(1);
    z-index: 0;
  }
  66% {
    position: absolute;
    left: 315px;
    transform: scale(1);
    z-index: 0;
  }
  67% {
    position: absolute;
    left: 305px;
    transform: scale(1);
    z-index: 0;
  }
  68% {
    position: absolute;
    left: 295px;
    transform: scale(1);
    z-index: 0;
  }
  69% {
    position: absolute;
    left: 285px;
    transform: scale(1);
    z-index: 0;
  }
  70% {
    position: absolute;
    left: 275px;
    transform: scale(1);
    z-index: 0;
  }
  71% {
    position: absolute;
    left: 265px;
    transform: scale(1);
    z-index: 0;
  }
  72% {
    position: absolute;
    top: 72;
    left: 255px;
    transform: scale(1);
    z-index: 0;
  }
  73% {
    position: absolute;
    left: 245px;
    transform: scale(1);
    z-index: 0;
  }
  74% {
    position: absolute;
    left: 235px;
    transform: scale(1);
    z-index: 0;
  }
  75% {
    position: absolute;
    left: 225px;
    transform: scale(1);
    z-index: 0;
  }
  76% {
    position: absolute;
    left: 215px;
    transform: scale(1);
    z-index: 0;
  }
  77% {
    position: absolute;
    left: 205px;
    transform: scale(1);
    z-index: 0;
  }
  78% {
    position: absolute;
    left: 195px;
    transform: scale(1);
    z-index: 0;
  }
  79% {
    position: absolute;
    left: 185px;
    transform: scale(1);
    z-index: 0;
  }
  80% {
    position: absolute;
    left: 175px;
    transform: scale(1);
    z-index: 0;
  }
  81% {
    position: absolute;
    left: 165px;
    transform: scale(1);
    z-index: 0;
  }
  82% {
    position: absolute;
    left: 155px;
    transform: scale(1);
    z-index: 0;
  }
  83% {
    position: absolute;
    left: 145px;
    transform: scale(1);
    z-index: 0;
  }
  84% {
    position: absolute;
    left: 135px;
    transform: scale(1);
    z-index: 0;
  }
  85% {
    position: absolute;
    left: 125px;
    transform: scale(1);
    z-index: 0;
  }
  86% {
    position: absolute;
    left: 115px;
    transform: scale(1);
    z-index: 0;
  }
  87% {
    position: absolute;
    left: 105px;
    transform: scale(1);
    z-index: 0;
  }
  88% {
    position: absolute;
    left: 95px;
    transform: scale(1);
    z-index: 0;
  }
  89% {
    position: absolute;
    left: 85px;
    transform: scale(1);
    z-index: 0;
  }
  90% {
    position: absolute;
    left: 75px;
    transform: scale(1);
    z-index: 0;
  }
  91% {
    position: absolute;
    left: 65px;
    transform: scale(1);
    z-index: 0;
  }
  92% {
    position: absolute;
    left: 55px;
    transform: scale(1);
    z-index: 0;
  }
  93% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  94% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  95% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  96% {
    position: absolute;
    top: 96;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  97% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  98% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  99% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
  100% {
    position: absolute;
    left: 50;
    transform: scale(1);
    z-index: 0;
  }
}
.is-hidden {
  opacity: 0;
  visibility: 0;
  position: absolute;
}

.container {
  width: 500px;
  position: relative;
}

body {
  background: url("bg.jpg") no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  color: #303030;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.svg-icon {
    height: 35px;
    width: 35px;
	cursor:pointer;
}

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

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

.component\@profile-card {

display: flex;

align-items: stretch;

flex-direction: column;

justify-content: space-between;

box-shadow: 8px 10px 66px 1px rgba(0, 0, 0, 0.2), -1px -1px 0px 1px white, -1px -1px 0px 1px white, inset 2px 0px 0px white;

position: relative;

height: 400px;

width: 100%;

z-index: 1;

}

@media (min-width: 480px) {

.component\@profile-card {

width: 460px;

}

.component\@profile-card__blur {

background: url("http://lorempixel.com/1200/1200/nature/3") no-repeat center center fixed;

background-size: cover;

filter: blur(13px);

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 0;

}

.component\@profile-card__header {

background: rgba(255, 255, 255, 0.7);

width: 90px;

position: absolute;

left: 0;

top: 0;

bottom: 0;

z-index: 2;

}

.component\@profile-card__body {

background: rgba(247, 247, 247, 0.6);

display: flex;

flex-grow: 1;

flex-shrink: 0;

flex-direction: column;

padding: 0 24px 24px 114px;

z-index: 1;

}

.component\@profile-card__title {

letter-spacing: 2px;

margin-bottom: 36px;

}

.component\@profile-card__link {

display: flex;

align-items: center;

justify-content: center;

position: absolute;

top: 0;

left: 0;

height: 60px;

width: 100%;

transition: ease 0.2s background;

z-index: 2;

}

.component\@profile-card__link:hover {

background: #d1d1d1;

}

.component\@profile-card__img {

margin: 0 auto;

}

.object\@sticker {

position: relative;

}

.object\@sticker__item {

color: #303030;

font-size: 36px;

display: flex;

justify-content: center;

background-clip: text;

}

.object\@media-object {

margin-top: 24px;

display: flex;

align-items: flex-start;

}

.object\@media-object:first-of-type {

margin-top: 0;

}

.object\@media-object__img {

margin-right: 1em;

}

.object\@media-object__body {

flex: 1;

}

.object\@media-object__heading {

margin: 0;

}

.object\@media-object__subheading {

color: #666;

font-size: 12px;

text-transform: uppercase;

margin-top: 0;

margin-bottom: 6px;

}

.object\@media-object__text {

margin: 0;

font-weight: 200;

}

.helper\@margin-top--none {

margin-top: 0;

}

#component\@profile-card-radio-2 {

transition: ease all 1s;

}

#component\@profile-card-radio-2:checked ~ #component\@profile-card-2 {

position: absolute;

left: 50px;

top: 24px;

opacity: 0.6;

transition: ease top 1s, ease opacity 1s;

transition-delay: 2s;

transform: scale(1);

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);

z-index: 0;

animation: primary 0.5s ease;

}

#component\@profile-card-radio-2:checked ~ #component\@profile-card-1 {

top: 0;

}

#component\@profile-card-radio-1 {

transition: ease all 1s;

}

#component\@profile-card-radio-1:checked ~ #component\@profile-card-1 {

position: absolute;

left: 50px;

top: 24px;

opacity: 0.6;

transition: ease top 1s, ease opacity 1s;

transition-delay: 2s;

transform: scale(1);

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);

z-index: 0;

animation: primary 0.5s ease;

}

#component\@profile-card-radio-1:checked ~ #component\@profile-card-2 {

top: 0;

}

@keyframes primary {

0% {

position: absolute;

top: 0;

left: 0px;

z-index: 2;

}

1% {

position: absolute;

left: 9.5px;

z-index: 2;

}

2% {

position: absolute;

left: 19px;

z-index: 2;

}

3% {

position: absolute;

left: 28.5px;

z-index: 2;

}

4% {

position: absolute;

left: 38px;

z-index: 2;

}

5% {

position: absolute;

left: 47.5px;

z-index: 2;

}

6% {

position: absolute;

left: 57px;

z-index: 2;

}

7% {

position: absolute;

left: 66.5px;

z-index: 2;

}

8% {

position: absolute;

left: 76px;

z-index: 2;

}

9% {

position: absolute;

left: 85.5px;

z-index: 2;

}

10% {

position: absolute;

left: 95px;

z-index: 2;

}

11% {

position: absolute;

left: 104.5px;

z-index: 2;

}

12% {

position: absolute;

left: 114px;

z-index: 2;

}

13% {

position: absolute;

left: 123.5px;

z-index: 2;

}

14% {

position: absolute;

left: 133px;

z-index: 2;

}

15% {

position: absolute;

left: 142.5px;

z-index: 2;

}

16% {

position: absolute;

left: 152px;

z-index: 2;

}

17% {

position: absolute;

left: 161.5px;

z-index: 2;

}

18% {

position: absolute;

left: 171px;

z-index: 2;

}

19% {

position: absolute;

left: 180.5px;

z-index: 2;

}

20% {

position: absolute;

left: 190px;

z-index: 2;

}

21% {

position: absolute;

left: 199.5px;

z-index: 2;

}

22% {

position: absolute;

left: 209px;

z-index: 2;

}

23% {

position: absolute;

left: 218.5px;

z-index: 2;

}

24% {

position: absolute;

top: 24;

left: 228px;

z-index: 2;

}

25% {

position: absolute;

left: 237.5px;

z-index: 2;

}

26% {

position: absolute;

left: 247px;

z-index: 2;

}

27% {

position: absolute;

left: 256.5px;

z-index: 2;

}

28% {

position: absolute;

left: 266px;

z-index: 2;

}

29% {

position: absolute;

left: 275.5px;

z-index: 2;

}

30% {

position: absolute;

left: 285px;

z-index: 2;

}

31% {

position: absolute;

left: 294.5px;

z-index: 2;

}

32% {

position: absolute;

left: 304px;

z-index: 2;

}

33% {

position: absolute;

left: 313.5px;

z-index: 2;

}

34% {

position: absolute;

left: 323px;

z-index: 2;

}

35% {

position: absolute;

left: 332.5px;

z-index: 2;

}

36% {

position: absolute;

left: 342px;

z-index: 2;

}

37% {

position: absolute;

left: 351.5px;

z-index: 2;

}

38% {

position: absolute;

left: 361px;

z-index: 2;

}

39% {

position: absolute;

left: 370.5px;

z-index: 2;

}

40% {

position: absolute;

left: 380px;

z-index: 2;

}

41% {

position: absolute;

left: 389.5px;

z-index: 2;

}

42% {

position: absolute;

left: 399px;

z-index: 2;

}

43% {

position: absolute;

left: 408.5px;

z-index: 2;

}

44% {

position: absolute;

left: 418px;

z-index: 2;

}

45% {

position: absolute;

left: 427.5px;

z-index: 2;

}

46% {

position: absolute;

left: 437px;

z-index: 2;

}

47% {

position: absolute;

left: 446.5px;

z-index: 2;

}

48% {

position: absolute;

top: 48;

left: 456px;

z-index: 2;

}

49% {

position: absolute;

left: 465.5px;

z-index: 2;

}

50% {

position: absolute;

left: 475px;

z-index: 2;

}

51% {

position: absolute;

left: 465px;

transform: scale(1);

z-index: 0;

}

52% {

position: absolute;

left: 455px;

transform: scale(1);

z-index: 0;

}

53% {

position: absolute;

left: 445px;

transform: scale(1);

z-index: 0;

}

54% {

position: absolute;

left: 435px;

transform: scale(1);

z-index: 0;

}

55% {

position: absolute;

left: 425px;

transform: scale(1);

z-index: 0;

}

56% {

position: absolute;

left: 415px;

transform: scale(1);

z-index: 0;

}

57% {

position: absolute;

left: 405px;

transform: scale(1);

z-index: 0;

}

58% {

position: absolute;

left: 395px;

transform: scale(1);

z-index: 0;

}

59% {

position: absolute;

left: 385px;

transform: scale(1);

z-index: 0;

}

60% {

position: absolute;

left: 375px;

transform: scale(1);

z-index: 0;

}

61% {

position: absolute;

left: 365px;

transform: scale(1);

z-index: 0;

}

62% {

position: absolute;

left: 355px;

transform: scale(1);

z-index: 0;

}

63% {

position: absolute;

left: 345px;

transform: scale(1);

z-index: 0;

}

64% {

position: absolute;

left: 335px;

transform: scale(1);

z-index: 0;

}

65% {

position: absolute;

left: 325px;

transform: scale(1);

z-index: 0;

}

66% {

position: absolute;

left: 315px;

transform: scale(1);

z-index: 0;

}

67% {

position: absolute;

left: 305px;

transform: scale(1);

z-index: 0;

}

68% {

position: absolute;

left: 295px;

transform: scale(1);

z-index: 0;

}

69% {

position: absolute;

left: 285px;

transform: scale(1);

z-index: 0;

}

70% {

position: absolute;

left: 275px;

transform: scale(1);

z-index: 0;

}

71% {

position: absolute;

left: 265px;

transform: scale(1);

z-index: 0;

}

72% {

position: absolute;

top: 72;

left: 255px;

transform: scale(1);

z-index: 0;

}

73% {

position: absolute;

left: 245px;

transform: scale(1);

z-index: 0;

}

74% {

position: absolute;

left: 235px;

transform: scale(1);

z-index: 0;

}

75% {

position: absolute;

left: 225px;

transform: scale(1);

z-index: 0;

}

76% {

position: absolute;

left: 215px;

transform: scale(1);

z-index: 0;

}

77% {

position: absolute;

left: 205px;

transform: scale(1);

z-index: 0;

}

78% {

position: absolute;

left: 195px;

transform: scale(1);

z-index: 0;

}

79% {

position: absolute;

left: 185px;

transform: scale(1);

z-index: 0;

}

80% {

position: absolute;

left: 175px;

transform: scale(1);

z-index: 0;

}

81% {

position: absolute;

left: 165px;

transform: scale(1);

z-index: 0;

}

82% {

position: absolute;

left: 155px;

transform: scale(1);

z-index: 0;

}

83% {

position: absolute;

left: 145px;

transform: scale(1);

z-index: 0;

}

84% {

position: absolute;

left: 135px;

transform: scale(1);

z-index: 0;

}

85% {

position: absolute;

left: 125px;

transform: scale(1);

z-index: 0;

}

86% {

position: absolute;

left: 115px;

transform: scale(1);

z-index: 0;

}

87% {

position: absolute;

left: 105px;

transform: scale(1);

z-index: 0;

}

88% {

position: absolute;

left: 95px;

transform: scale(1);

z-index: 0;

}

89% {

position: absolute;

left: 85px;

transform: scale(1);

z-index: 0;

}

90% {

position: absolute;

left: 75px;

transform: scale(1);

z-index: 0;

}

91% {

position: absolute;

left: 65px;

transform: scale(1);

z-index: 0;

}

92% {

position: absolute;

left: 55px;

transform: scale(1);

z-index: 0;

}

93% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

94% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

95% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

96% {

position: absolute;

top: 96;

left: 50;

transform: scale(1);

z-index: 0;

}

97% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

98% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

99% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

100% {

position: absolute;

left: 50;

transform: scale(1);

z-index: 0;

}

.is-hidden {

opacity: 0;

visibility: 0;

position: absolute;

}

.container {

width: 500px;

position: relative;

}

body {

background: url("bg.jpg") no-repeat center center fixed;

background-size: cover;

display: flex;

justify-content: center;

color: #303030;

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

}

.svg-icon {

height: 35px;

width: 35px;

cursor:pointer;

}

Demo

Download

Previous Post Previous post:
Material Design Sign Up Form

Next Post Next post:
Direction Aware 3D Hover Effect

css3transition

View all posts by css3transition →

please contact @ css3transition@gmail.com to create your own blog

pbn - Free chat bot html template

I love your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone…

vishnu - Order Progress Bar with Animated steps Using CSS only

nice

Soner - Free chat bot html template

How to integrate our own chat length with this template prgfiles@gmail.com

css3transition - Custom Select Menu Using CSS3 with Smooth Transition Effect

Yes sir, it is a spelling mistake & thankful that you have mentioned it.

13 best responsive css grid system 3D Animation 3D hover effect 3d slider using jquery and css 3D Tilt Effect 3d Transform 3d transition 4 columns grid layout about page template about us page generator about us page template about us page template bootstrap about us page template bootstrap 4 about us page template bootstrap free download about us page template free download about us page template html css accordion checkout accordion using css3 accordion using css3 transition accordion without jquery add and remove html elements dynamically with javascript add and remove items from array java javascript add remove list items add and remove items from listbox using javascript Add and Remove List item using javascript age calculator Anchor Hover Effect angular calendar angular cli commands angular project example animate input field jquery animated border in svg Animated input label on focus animated loader Animated page loader using css3 animated search box animated search box css Animated search input box animated slider Animated Spinner in css3 animated Subtle animated tect animated toggle animation animation label Animation Level aware background background svg animation background-animation background-color background-transition banner design free download banner design ideas examples banner design inspiration ideas banner design templates banner design tips beautiful animated slider Beautiful Button beautiful css breadcrumbs beautiful select menu beautiful svg icons for website best collapsible search box best contact form best free html template Best jquery animation example best seo tools for wordpress Best Social Media Plugin Best Timeline Design Best Timeline Html best wordpress plugin boost performance of wordpress boost website speed using htaccess boost wordpress speed bootstrap 4 chat template bootstrap 4 smooth scroll bootstrap calendar bootstrap calendar in material design bootstrap carousel bootstrap chat bubble bootstrap custom checkbox bootstrap datatable responsive download bootstrap datepicker bootstrap datepicker in material design bootstrap flexbox bootstrap horizontal news scroller bootstrap horizontal news ticker bootstrap image slider bootstrap Login Form bootstrap news feed bootstrap news slider bootstrap payment checkout form bootstrap pricing table example bootstrap pricing table template free bootstrap pricing template bootstrap profile page template bootstrap sign-up form bootstrap table bootstrap thumbnail image carousel bootstrap thumbnail slider bootstrap thumbnails carousel border animation border transition Breadcrumbs breadcrumbs using css bubble animation build a responsive grid system Bulb On/Off Animation button Button Animation button click button effect button hover effect button ripple effect css only cache plugin calendar example canvas animation canvas sparkle animation caption effect caption slide effect Card UI cdn change font size change font size on button click chat application in javascript source code chat bot code in html & css chat bot html chat bot html code for website chat bot html css chat bot html template free chat box html code for website chat box html code free download chatbot plugin checkbox css style examples chta bot html code circular navigation Click Animation Click to Expand Search Bar click to reveal search bar click to ripple using css clock clone clone data cloud data network codrops input collapsed responsive data table Collection Of Button Hover Effects color compare product using jquery connection connection string contact form contact form using css and html Content Block content slider cool features of jquery copy copy html data count adjusent child count element child count siblings countdown countdown timeer Cpation on Hover create angular 7 project create listbox in javascript create new component in angular create svg loader creative banner design samples Creative Button Styles creative web banner design inspiration credit/debit payment method css css accordion css background ripple effect css cards ui css checkbox generator css flexbox css grid generator css grid layout css grid template css grid vs flexbox css input focus border css only breadcrumbs CSS only Progress Bar css only slider css properties css ripple effect on click css ripple effect on hover css ripple effect onclick css slider css text animation examples css text animation examples with code css text effects examples Css Transition-Delay Properties css watch css water ripple effect css3 css3 3d animation css3 and html5 slider css3 animation css3 calc css3 count down clock css3 features css3 flexbox css3 gradient CSS3 Hover Effects icon hover effects bootstrap css3 loader css3 selectors css3 spinner css3 text animation effects examples css3 transform css3 transition custom bootstrap calendar custom bootstrap datepicker custom checkbox bootstrap 4 custom checkbox codepen custom checkbox css tricks custom checkbox input using css custom checkbox without label Custom checkboxes with CSS only custom field for upload button custom input field custom select menu custom upload button customize file input using css3 customize your upload button data sorting using javascript data table responsive bootstrap 4 datab table database database connection database connection string in php datatable responsive bootstrap date format function date function date_diff function datepicker datepicker example delete button delete icon delete list item javascript delete svg icon depending direction direction aware Direction aware hover download icon png dropdown shopping cart dynamic data sorting EBS payment gateway integration effect employee table enhance website performance using htaccess enhance website speed using htaccess excellent css and svg loaders expanding search bar expanding search bar bootstrap Export Html table data to an Excel file Export Html table data to an Excel file by javascript export html table data to excel sheet using jquery facebook chat box html code fancy table file upload file upload widget fixed header fixed side menu fixed sidebar fixed table header Flex Grid Flex Layout flex-basis flex-grow flex-order flexbox bootstrap flexbox center flexbox css flexbox grid flexbox html grid flexbox justify-content flexbox layout flexbox space between flexbox vertical align flexbox vs grid Fluent Design Fluent UI Card focus effects Folding Animation On Hover font awesome icon hover effect font-size form animate label form animation css free cdn free chatbot application free cloud data network free html code for registration form free icon library free icons download free icons for commercial use free icons no attribution free svg icons Fullscreen Image Slider Fullscreen Slider fullscreen Slideshow gallery loader using css3 Transition get date from datepicker get date in php google material design Gradient Grid Layout grid template columns grid template html heart svg icon hover hover animation hover effect hover effect in css3 hover icon png hover on image how to create a chat box in html how to create angular project in visual studio code How to Customize Checkbox how to install angular cli how to split my wordpress post into multiple post html html chat box template html chat room source code html css card layout html css slider html flexbox html form html grid layout html grid template free html new tags html newsbox html payment method form html pricing table generator html product compare html sign-up form html slider html table templates free download html5 html5 features html5 new element html5 new input tag html5 new tags HTML5 Signup & Registration Forms html5 techniques html5 tips html5.css3.jquery icon animation css3 icon hover effect free download icon hover effects css code icon tap effect icons online image hover image hover effect image preload animation image preloader images caption effect images loader using css3 transition input animation input animation codepen input field input field effects css input focus input focus css glow input placeholderlabel animation Integrate EBS payment gateway in php javascript javascript chat box javascript listbox add items javascript remove list item from ul jawbreaker input field jquery jquery 3 jquery 3 features jquery 3 new features jquery animation jquery calendar jquery cool features jquery datatable responsive jquery features jquery function jquery hover effect jquery input animation jquery new jquery news ticker vertical scroll free download jquery slide out search box jquery slider jquery smooth scroll jquery thumbnail slider jquery.bootstrap.newsbox.min.js download keyframes animation Label Animation Lamp Animation laoder using css3 transition laverage brower caching in wordpress laverage browser caching in website Layer Animation Layer Transition Effect layered Animation Layered Slider layout lazy load animation lazy loader Leverage Browser Caching login and registration form in html login form login form html code logo animation make your wordpress website light material desgin datepicker material design material design angular material design bootstrap material design bootstrap template free material design calendar material design components material design icons Material design ripples with CSS material design template bootstrap material design templates free Material design Timeline menu migrate data from one list to another list Migrate old version to latest version in angular mirror Mirror effect Mo.Js Multi-step forms multi-step payment checkout form multiple background in css multiple file uploader mysql mysql database query for connection mysql query navigation new in jquery 3 new material design news ticker jquery horizontal free download newsticker using html and js ng generate component ng new project on hover animation open source chat application optimize wordpress website Order Processing Plugin Order Processing with Steps otp verification html template pageloader Parallax Effect path animation path animation in svg payment checkout form payment checkout form html Payment method payment method plugin payment option PayPal payment method performance optimization in wordpress phone registration php php database connection php date picker php integration of EBS payment Gateway placeholder text with typing effect postgres PostgresSQL prelaoder Pretty checkbox price table template Pricing Table Process Bar product comparision table product features comparision product review table Profile Card Bootstrap profile card codepen profile card design Profile Card Material UI profile card template Profile Card Template Html profile effect Progress Bar Progress Bar Plugin Pure CSS custom checkboxes pure css prelaoder Pure CSS ripple effect Pure css ripple effects for buttons pure css slider Registration Form registration form in html with css code free download registration form in html with css source code registration form in html with validation reponsive thumbnail slider responsive breadcrumbs responsive data table example responsive data table for mobile Responsive Grid responsive grid bootstrap responsive grid with bootstrap responsive news ticker responsive pricing table bootstrap responsive pricing table html responsive slider responsive table responsive table with fixed header Responsive Timeline Responsive Timeline Html Template responsive web design grid Ripple Click Effect rotating words scalable graphic icons scale animation scroll behavior smooth search input search on click Searchbox select menu select menu animation select menu transition seo plugin share svg icon shopping cart design shopping cart dropdown show placeholder on focus sidebar sidenav Sign up Form sign up form bootstrap sign up form using css3 sign up html code for website Sign-In Form sign-up form using bootstrap Sign-Up/Login Form simple checkbox css simple checkbox with css Simple Icon Hover Effects with CSS simple text animation css slide animation on hover slide out search bar slider using css slider using css3 and jquery Slider Using Layered Animation slideshow slideshow Animation smooth jquery slider smooth-background-animation social icon hover effect css3 social icon hover effects social icons effect Social Media soical media icons sparkle animation using jquery sparkle effect sparkle enimation speed up website using htaccess spinnner split post into multiple pages split post without plugin in wordpress sql Stack Animation static data sorting sticky header styling to count sibling/child stylish font stylish search box in html Subtle animation Subtle click effects Subtle effects svg svg animation svg border animation svg bubble animation svg image animation Svg Line Animation svg loader animation svg loaders svg loading icons svg masking svg path animation Switch Animation Switch Button switch item from one list to another list Switching Level/layers symmetry table table body scroll table sticky header Team UI Grid text animation text animation css codepen text animation html text animation in jquery text box animation bootstrap Text Effect Text Infinite Animation text input animation text input effects css Text Move Animation Text Shadow Text Transform Text Transform Effect thumbnail carousel thumbnail slider thumbnails Timeline Design Timeline Html Timeline UI timer toggle toggle Animation Toggle Button Toggle Button On Click Toggle Forms toggle menu Toggle Switch Toggle Switch Animation top 10 html form top 10 sign-up form in html top 10 sign-up form using css3 top 10 wordpress plugin Top Social Media Plugin tranform effects transform transform effect transition transition effect trash icon trash icon animation tutorial type to search UI Grid user icon svg user profile form User profile page template user registration form in html user registration form using bootstrap user svg icon Valentines vector graphic very good wordpress plugin w3 total cache plugin wave effect css webpage loader using css website loader using css3 transition word animation wordpress hacks wordpress images optimization technique wordpress optimization technique Wordpress Plugin wordpress plugin to enhance website wordpress tips wordpress tricks wrist watch zoom effect Zoom-In Animation Zoom-Out Animation

Stacked Animated UI Level using CSS

css3transition

Leave a Reply Cancel reply

Add and Remove List item using javascript

Fancy Sign-up Form Using css3

How to Use Google Drive as Free CDN for your website (Content Delivery Network)

Newsticker plugin using bootstrap and jquery

Material Design Login Form Animation

The future of PostgreSQL

7 Most Popular WordPress Themes of the Year

How to create new app in Angular

About Us Responsive Page Layout Html

A Complete Guide to CSS Flexbox

Latest Posts

The future of PostgreSQL

7 Most Popular WordPress Themes of the Year

How to create new app in Angular

css3transition

You might also like

Leave a Reply Cancel reply