标签:orm ini 动画 inf size count direct back UNC
<style>
/* 定义名称为zhuan的动画 */
@keyframes zhuan {
0% {
transform: translate(0, 0);
}
/* 水平移动 */
30% {
transform: translate(600px, 0);
}
/* 放大x,y 2倍*/
50% {
transform: scale(2, 2);
}
/* 旋转45度 */
70% {
transform: rotate(180deg);
/* 设置旋转中心为y轴中点 */
transform-origin: 0 50%;
}
100% {
transform: translate(1500px, 800px);
}
}
div {
width: 300px;
height: 300px;
background-color: aqua;
animation: zhuan;
/* 动画持续时间 */
animation-duration: 10s;
}
</style>
动画属性
div {
width: 300px;
height: 300px;
background-color: aqua;
animation-name: zhuan;
/* 动画持续时间 */
animation-duration: 10s;
/* 动画style */
animation-timing-function: ease-in;
/* 延迟触发 */
animation-delay: 2s;
/* 设置动画原路返回 */
animation-direction: alternate;
/* 设置动画次数为无限次 */
animation-iteration-count: infinite;
/* 设置动画不会返回 */
animation-fill-mode: forwards;
}
div:hover {
/* 动画暂停 */
animation-play-state: paused;
}
标签:orm ini 动画 inf size count direct back UNC
原文地址:https://www.cnblogs.com/limakilo/p/14933356.html