css3 实现动画效果,怎样使他无限循环动下去?

html-css020

css3 实现动画效果,怎样使他无限循环动下去?,第1张

一、实现CSS3无限循环动画代码示例。

代码如下:

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

扩展资料

实现动画无限循环所需要的CSS属性说明:

1、infinite

在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下:

1. 在 HTML 中创建门和灯笼的元素,并给这些元素添加类名。例如:

<div class="door">门</div>

<div class="lantern">灯笼</div>

2. 在 CSS 中为门添加打开的样式。例如,可以使用 transform 属性来旋转门:

.door {

transform: rotate(90deg)

}

3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如,可以使用以下样式来使灯笼从上方移动到下方:

.lantern {

animation: moveDown 1s ease-in-out

}

@keyframes moveDown {

from {

top: -100px

}

to {

top: 100px

}

}

4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法,来添加动画类名,从而触发动画的播放。

例如:

document.querySelector('.door').addEventListener('click', function() {

document.querySelector('.lantern').classList.add('lantern-animation')

})

希望这些信息能帮助到您!