前端学习（七）CSS3动画和旋转

最新推荐文章于 2024-08-21 22:51:08 发布

赏善罚饿

最新推荐文章于 2024-08-21 22:51:08 发布

阅读量8.7k

点赞数 1

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

本文链接：https://blog.csdn.net/whitefish520/article/details/107805266

版权

本文详细介绍了CSS3中的动画原理和使用方法，包括动画的定义、调用和常见属性，以及如何通过@keyframes创建复杂的动画效果。同时，文章探讨了3D转换的概念，特别是透视、移动和旋转的实现，强调了透视在3D效果中的重要性。通过实例代码，读者可以了解如何运用这些技术实现动态和立体的前端效果。

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

动画-animation

概念：动画是CSS3中的颠覆性特征，可以设置多个节点来控制一组动画，实现复杂的动画效果
使用流程：先定义，后调用
语法格式

/* 先定义 */
@keyframes 动画名称 {
   
    0% {
   
        width: 100px;
    }
    100% {
   
        width: 200px
    }
}

/* 后调用 */
div {
   
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%