首先做动画效果需要分为两步，第一步先定义动画，第二步使用动画。

一、创建动画效果

使用@keyframes定义一个动画名，定义后在其对象里写入动画效果的移动方式。

首先我们先来声明一个名为move的动画效果。
接收两个参数，from里的属性为在做动画之前的状态或者位置，to里面的属性就是移动之后的位置。
如下代码我们可以看到动画之前元素原地不动，然后做一个向右1000像素的动画。这样我们就定义好了一个最简单的动画效果。

@keyframes move {from {transform: translateX(0);}to {transform: translateX(1000px);}}

二、使用动画

1、首先页面上我们先创建一个盒子

<body><div class="box">动起来吧</div>
</body>

2、在该盒子身上使用该动画效果，该盒子就会沿着x轴水平向右移动1000像素。

给需要做动画的盒子添加animation属性
animation属性接收多个参数。

动画名，这里我定义的move

时间，我定义了两秒

重复次数，infinite为无限循环

速度曲线，linear为平滑运动，steps(n)可以将默认的补间动画转换为逐帧动画，接收参数为数字，代表分几步

延迟时间，需要写在运动时间后

执行方向，alternate为来回运动

执行完毕状态，forwards，执行完停留在原地

.box {width: 200px;height: 200px;background-color: pink;border-radius: 50%;text-align: center;line-height: 200px;animation: move 2s;
}

3、补充 animation-play-state: paused

暂停动画，给在做动画元素hover效果里加

如何使用css3做简单的动画效果？相关推荐

css3做一个loading动画效果（详细思路）
纯css3的动画做效果: 小人来回移动,碰到小球时,小球消失. 首先,html搭建结构: <body><div class="wrapper"><di ...
html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
原标题:html+css3太阳系行星运转动画效果的实现代码做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星 ...
css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
css图形动画,CSS3 实现图形下落动画效果
先看效果实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
html5圆圈动画效果,CSS3实现光感圆圈动画效果
CSS3实现光感圆圈动画效果全部代码 html> CSS3实现光感圆圈动画效果 body { background: #111; } .halo { transition: .4s all; } ...
android+字体+动画效果怎么做的,字体动画效果怎么做？原来这么简单！
原标题:字体动画效果怎么做?原来这么简单! 平常喜欢看视频的朋友一定有留意到,视频中的字幕,一般会带上各种各样的动态效果,而不是简单的出现.停留和消失.那么,丰富多彩的字体动画效果是怎么实现的呢?下面 ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...

如何使用css3做简单的动画效果？

一、创建动画效果

二、使用动画

如何使用css3做简单的动画效果？相关推荐

最新文章

热门文章