css动画

最新推荐文章于 2024-04-03 02:18:32 发布

奔跑吧、GZB

最新推荐文章于 2024-04-03 02:18:32 发布

阅读量558

点赞数

本文链接：https://blog.csdn.net/qq_41635167/article/details/84631811

版权

使用css实现动画有两种方式，animation和transition。

一.transition（过渡）

它有四个属性：

transition-property规定设置过渡效果的 CSS 属性的名称
transition-duration规定完成过渡效果需要多少秒或毫秒
transition-timing-function规定速度效果的速度曲线
transition-delay定义过渡效果何时开始

<style>
*{
    margin: 0;
    padding: 0;
}
.div1{
    width: 100px;
    height: 100px;
    background-color: red; 
    transition: transform 2s ease 2s;
}
.div1:hover {
  background-color: #fff;
  transform: translateX(50%);
}

</style>

<body>
    <div class="div1"></div>   
</body>

初学css时，比较容易混淆transform（变形）、transition（过渡）、translate（移动）。transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；transform可以设置为transition（过渡动画）的transition-property的一个属性值。

二.animation

animation属性结合@ keyframes使用， animation中的animation-name需要设置成@ keyframes的name一致。

animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay规定在动画开始之前的延迟
animation-iteration-count规定动画应该播放的次数
animation-direction规定是否应该轮流反向播放动画
animation-play-state规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-fill-mode指定动画是否正在运行或已暂停

@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-fill-mode:forwards; 
}

奔跑吧、GZB

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css动画

使用css实现动画有两种方式，animation和transition。一.transition（过渡）它有四个属性：transition-property规定设置过渡效果的 CSS 属性的名称 transition-duration规定完成过渡效果需要多少秒或毫秒 transition-timing-function规定速度效果的速度曲线 transition-delay定义过...
复制链接

扫一扫