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

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

一、创建动画效果
使用@keyframes定义一个动画名,定义后在其对象里写入动画效果的移动方式。
首先我们先来声明一个名为move的动画效果。接收两个参数,from里的属性为在做动画之前的状态或者位置,to里面的属性就是移动之后的位置。如下代码我们可以看到动画之前元素原地不动,然后做一个向右1000像素的动画。这样我们就定义好了一个最简单的动画效果。
@keyframes move {
from {
transform: translateX(0);
}

to {
transform: translateX(1000px);
}
}
二、使用动画 
1、首先页面上我们先创建一个盒子

动起来吧


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

如何使用css3做简单的动画效果?最先出现在Python成神之路

版权声明:
作者:zhangchen
链接:https://www.techfm.club/p/11076.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>