css animation（动画）

最新推荐文章于 2024-11-09 10:06:06 发布

杂货铺(城南渔人)

最新推荐文章于 2024-11-09 10:06:06 发布

阅读量113

点赞数

分类专栏： css 文章标签：动画 css3 css html

本文链接：https://blog.csdn.net/hbvh1/article/details/128002401

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<view class="handelScreenImageBox">
	<image class="handelScreenImage" src="@/static/images/right.png" />
</view>
.handelScreenImageBox{
		display: flex;
		align-items: center;
		transform: rotate(90deg);
		margin-left: 15px;
	}
.handelScreenImage {
		display:block;
		width: 10px;
		height: 18px;
		/* transform: rotate(90deg); */
		animation-name: Screen; // 动画名称
		animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
		animation-timing-function: ease; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
		animation-delay: 0s; // 动画延迟时间
		animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
		animation-duration: 1s; // 动画完成时间
	}

	@keyframes Screen {
		0% {
			/* transform: scale(1); */
			right: 5px;
		}

		25% {
			right: 2px;
		}

		50% {
			/* transform: scale(0.85); */
			right: 0px;
		}

		75% {
			right: -2px;
		}

		100% {
			/* transform: scale(1); */
			right: -5px;
		}
	}