css3实现一个过渡效果

时间：2020-05-02 22:43:34 阅读：98 评论：0 收藏：0 [点我收藏+]

标签：absolute css har pause rom type change nim add

代码如下：

<!DOCTYPE html>

<head>

<style>

.test{

box-sizing: border-box;

border: 5px solid #f00;

padding: 5px;

width: 100px;

height: 100px;

position: absolute;

/* 简写的姿势排序

@keyframes name : 动画名

duration 持续时间

timing-function 动画频率

delay 延迟多久开始

iteration-count 循环次数

direction 动画方式,往返还是正向

fill-mode 一般用来处理停留在某一帧

play-state running 开始,paused 暂停 ....

更多的参数去查文档吧..我就不一一列举了 */

animation: moveChangeColor ease-in 2.5s 1 forwards running;

}

@keyframes moveChangeColor {

from {

top:0%;

left:5%;

background-color:#f00

}

to{

top:0%;

left:50%;

background-color:#ced;

}

</style>

</head>

<body>

</body>

</html>

css3实现一个过渡效果

标签：absolute css har pause rom type change nim add

原文地址：https://www.cnblogs.com/akby/p/12819818.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行