描述 |
CSS |
|
|
@keyframes |
规定动画。 |
3 |
|
animation |
所有动画属性的简写属性，除了 animation-play-state 属性。 |
3 |
|
animation-name |
规定 @keyframes 动画的名称。 |
3 |
|
animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
|
animation-timing-function |
规定动画的速度曲线。默认是 "ease"。开始和结束慢速 ease-in 开始是慢速 |
3 |
|
animation-delay |
规定动画何时开始。默认是 0。 |
3 |
|
animation-iteration-count |
规定动画被播放的次数。默认是 1。无限：infinite |
3 |
|
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。Alternate逆向 |
3 |
|
animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。 |
3 |
|
animation-fill-mode |
规定对象动画时间之外的状态。 |
3 |
前缀：-webkit-，用于/* Safari 和 Chrome */动画定义：-webkit-animation：name duration ...动画实现：@keyframes name{/*动画代码*/}例：一个div盒子上下弹跳的实现
<style> #t1{ width: 100px; height: 100px; background-color: aqua; animation-name: bounce; position: relative; -webkit-animation-duration:3s; } @keyframes bounce { 0%,20%,50%,80%,100%{-webkit-transform: translateY(0px)} 40%{-webkit-transform: translateY(-30px)} 60%{-webkit-transform: translateY(-15px)} }</style>
原文地址：https://www.cnblogs.com/cxxBoo/p/11367896.html
时间： 2024-10-25 05:23:13