react简书项目学习笔记14React实现css3过渡动画及对动画效果的一些使用

MeiLuan_yahoho

于 2019-02-01 09:53:01 发布

阅读量424

点赞数

分类专栏： react 文章标签： css3 过渡动画 react 简书项目动画效果

本文链接：https://blog.csdn.net/MeiLuan_yahoho/article/details/86736069

版权

react 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

.show{
opacity: 1;
transition:all 1s ease-in;
}

.hide{
opacity: 0;
transition:all 1s ease-in;
}

通过css3的transition属性可以实现过渡
改写代码，自己定义修改动画实现效果

/* css的动画效果指的是通过@keyframes来自己定义一些css的动画 */ 
@keyframes hide-item {
  0%{
    opacity: 1;
    color: red;
  }
  50%{
    opacity: 0.5;
    color: green;
  }
  100%{
    opacity: 0;
    color: blue;
  }
}
/* 此句表示使用hide-item的动画效果,最后的forwards属性表示希望最后的动画效果保存为现在样式状态*/
.hide{
  animation:hide-item 2s ease-in forwards;
}