CSS动画是一种通过改变元素样式来实现动画效果的技术,它可以使网页更加生动、有趣,提高用户体验,CSS动画可以分为两种:过渡(transition)和动画(animation)。
过渡(transition)
过渡是一种简单的动画效果,可以实现元素的样式在不同状态之间的平滑切换,过渡需要指定元素的几个关键状态属性(如背景颜色、宽度等),以及这些属性在过渡过程中的变化速度。
1、基本语法
/* 定义过渡效果 */ transition: property duration timing-function delay; /* 或者分别指定各属性 */ transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay;
2、示例
/* 当鼠标悬停在按钮上时,背景颜色从透明变为蓝色,变化时间为0.5秒,速度先快后慢,延迟0.1秒开始 */ button { background-color: transparent; transition: background-color 0.5s ease-in-out 0.1s; } button:hover { background-color: blue; }
动画(animation)
动画是一种更复杂的动画效果,可以实现元素的样式在一定时间内的连续变化,动画需要定义关键帧(keyframes),即元素在不同时间点的状态,浏览器会根据关键帧自动计算中间状态,实现平滑的动画效果。
1、基本语法
/* 定义动画名称 */ @keyframes animation-name { /* 定义关键帧 */ from { property: value; } to { property: value; } } /* 应用动画 */ element { animation-name: animation-name; animation-duration: duration; animation-timing-function: timing-function; animation-delay: delay; animation-iteration-count: iteration-count; animation-direction: direction; animation-fill-mode: fill-mode; }
2、示例
/* 定义一个旋转360度的动画 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 应用动画 */ div { width: 100px; height: 100px; background-color: red; animation-name: rotate; animation-duration: 2s; /* 动画持续时间为2秒 */ animation-timing-function: linear; /* 动画速度为线性 */ animation-delay: 1s; /* 动画延迟1秒开始 */ animation-iteration-count: infinite; /* 动画无限循环 */ }
过渡与动画的区别
1、过渡只能实现元素的样式在不同状态之间的平滑切换,而动画可以实现元素的样式在一定时间内的连续变化,动画可以实现更复杂的效果。
2、过渡需要指定元素的几个关键状态属性,而动画需要定义关键帧,关键帧可以包含多个属性的变化,从而实现更丰富的动画效果。