css动画，放大缩小；元素开始隐藏，延迟后显示动画

一只开心鸭！

已于 2024-03-13 11:34:08 修改

阅读量1.6k

点赞数 10

分类专栏： css 文章标签： css css3 前端

于 2024-03-13 11:33:15 首次发布

本文链接：https://blog.csdn.net/oneya1/article/details/136675047

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和Webkit动画属性在HTML元素上实现放大缩小、右向淡入、左向淡入和向上淡入的动画效果，包括关键帧的定义和使用方法。

摘要由CSDN通过智能技术生成

效果

动画

1.动画放大缩小，循环

<div class="bigSmall"></div>
/* 放大缩小 */
.bigSmall {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  -webkit-animation: s1 1.5s linear infinite;
}

@-webkit-keyframes s1 {
  0%,
  100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.1, 1.1);
  }
}

2.右淡入，先隐藏，0.1秒后显示动画

<div class="titleBox"></div>
.titleBox {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  opacity: 0;
  -webkit-animation: fadeInRight 1s linear 0.1s 1 normal forwards;
}

.titleBoxAni {
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

3.左淡入

<div class="leftSlide "></div>
.leftSlide {
  -webkit-animation: fadeInLeft 1s linear 0.1s 1 normal forwards;
  opacity: 0;
}

/* 左淡入 */
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

4.向上淡入

<div class="bottomTitle "></div>
.bottomTitle {
 width: 100px;
  height: 100px;
  background-color: blueviolet;
  visibility: hidden;
  -webkit-animation: slideInUp 1s linear 0.3s 1 normal forwards;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}