css切入动画

Wombat-

于 2021-06-23 16:49:43 发布

阅读量757

点赞数 1

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

本文链接：https://blog.csdn.net/haluodepaopao/article/details/118152019

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文展示了如何使用CSS实现四个基本的平滑过渡动画：自下而上、自上而下、自右而左和自左而右。通过`@keyframes`规则定义动画关键帧，结合`animation`属性应用到元素，实现了元素在不同方向上的平滑移动效果。

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

1.自下而上

.class{
	animation: slide-down 0.3s ease-in-out;
}
@keyframes slide-down{
  0%{transform:translateY(100%);}
  100%{transform:translateY(0px);}
}

2.自上而下

.class{
	animation: slide-up 0.3s ease-in-out;
}
@keyframes slide-up{
  0%{transform:translateY(0px);}
  100%{transform:translateY(100%);}
}

3.自右而左

.class{
	animation: fold-left-in .3s ease-in-out;
}
@keyframes fold-left-in {
  0% {
   transform: translateX(100%);
  }
  100% {
   transform: translateX(0);
  }
}

4.自左而右

.class{
	animation: fold-out .3s ease-in-out;
}
@keyframes fold-out {
  0% {
   transform: translateX(0);
  }
  100% {
   transform: translateX(-100%);
  }
}