animation 自定义动画

最新推荐文章于 2022-10-13 07:00:00 发布

二段飞踢

最新推荐文章于 2022-10-13 07:00:00 发布

阅读量264

点赞数

分类专栏： CSS重点文章标签： css

本文链接：https://blog.csdn.net/gygygydgh/article/details/104108566

版权

CSS重点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

animation 自定义动画

animation-name 动画名
animation-duration 动画持续时间
keyframes 关键帧

自定义动画播放次数

animation-iteration-count: infinite;

自定义播放顺序：顺时逆时交替播放

animation-direction: alternate;

自定义播放顺序：倒序播放播放

animation-direction: reverse;
animation-direction: alternate-reverse;

动画以外的状态

animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

控制动画是否播放

animation-play-state: running;

定义关键帧

@keyframes round{ /*这里名称自己取的 */
				0%{
					transform: translate3d(0,0,0);
				}
				25%{
					transform: translate3d(100%,0,0);
				}
				50%{
					transform: translate3d(100%,100%,0);
				}
				75%{
					transform: translate3d(0,100%,0);
				}
				100%{
					transform: translate3d(0,0,0);
					background-color: green;
				}