CSS3--过渡和动画

七拾四

已于 2022-07-17 17:19:27 修改

阅读量213

点赞数

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

于 2022-07-17 16:02:45 首次发布

本文链接：https://blog.csdn.net/weixin_44348052/article/details/125781715

版权

本文介绍了CSS3中的过渡和动画效果。过渡是两种样式之间的平滑转换，包括属性、持续时间等要素。动画则允许更复杂的样式变化，通过@keyframe规则定义并绑定到元素上。两者的主要区别在于过渡依赖事件触发，动画则无需触发且能设定多个样式变化。

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

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

一、过渡transition

实际就是两种样式逐渐转换之间的效果，使两种样式之间的转变不会生硬。

有两个重要要素：添加效果的属性和效果的持续时间。若没有指定持续的时间将没有过渡效果。

div
{
width: 20px;
height:40px;
background-color: yellow;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover{
width:50px;
}

我们可以同时添加多个样式的过渡效果，用逗号隔开。

div
{
width: 20px;
height:40px;
background-color: yellow;
transition: width 2s , height 3s , background-color 5s;
-webkit-transition: width 2s , height 3s , background-color 5s; /* Safari */
}
div:hover{
width:50px;
height:10px;
background-color: blue;
}

除了元素和时间外，还可以规定过渡效果的时间曲线和效果开始的时间