CSS3动画入门 CSS动画如何使用（举例说明）

本文直接通过代码演示及注释初步了解一下CSS3动画的使用。

演示效果可以直接拷贝代码运行一下即可~

另外推荐几个不错的动画网站：

Animate.css

Animista

动画工具

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画演示</title><style type="text/css">.test {width: 200px;height: 28px;background-color: #00b166;}/* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。下面是一个从 20%（相对于动画时长的百分比） 到 100% 的动画from = 0%to = 100%*/@keyframes bounceOutLeft {20% {opacity: 1;-webkit-transform: translate3d(20px, 0, 0);transform: translate3d(20px, 0, 0);}to {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0);transform: translate3d(-2000px, 0, 0);}}/* 给某一个类添加动画需要给它配置animation属性语法：animation: name duration timing-function delay iteration-count direction;name:规定 @keyframes 动画的名称。duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。timing-function:规定动画的速度曲线。默认是 "ease"。delay：规定动画何时开始。默认是 0。iteration-count：规定动画被播放的次数。默认是 1。direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。（alternate下一次反向播放，前提是播放次数大于1）*/.bounceOutLeft {width: 200px;height: 28px;background-color: red;-webkit-animation: bounceOutLeft 1s;animation: bounceOutLeft 0.6s ease-in;}</style><script type="text/javascript">changeClass = function () {//            设置一个计时器用于实现动画结束后隐藏该元素。
//            setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(function () {document.getElementById("test").style.display = "none";}, 600);//            点击之后给元素添加动画的两种方式：
//            1、通过替换class 这个方法有点傻逼 需要把原class的样式重新写一遍 只为了添加一个 animation属性;
//            2、直接在原class 上添加 animation属性
//            document.getElementById("test").className = "bounceOutLeft";document.getElementById("test").style.animation = "bounceOutLeft 0.6s ease-in";};resetClass = function () {
//            重置要做的事情有两个：
//            1、显示元素 display = "";
//            2、取消动画 animation = ""document.getElementById("test").style.display = "";
//            document.getElementById("test").className = "test";document.getElementById("test").style.animation = "";};</script>
</head>
<body>
<div id="test" class="test"></div>
<button id="changeBtn" οnclick="changeClass()">change</button>
<button id="changeBtn2" οnclick="resetClass()">reset</button>
</body>
</html>

CSS3动画入门 CSS动画如何使用（举例说明）相关推荐

原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
＜CSS3练习＞ CSS动画综合案例热点图（含素材）
CSS动画分为两个步骤: 1.先定义动画 2.再调用动画语法如下 1.定义: @keyframs 动画名称 {from(0%){}to(100%){}} 这里的数字可以从0%~100% 可以任意代 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
JS动画和CSS动画之间的区别和特点?
一.写在前面之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题.现在我们来详细了解一下CSS和JS动画之间的区别和特点. 二.CSS动画优点: 1.浏览器可 ...
android动画入门,Android动画之入门篇（一）
作为Android开发者,动画是非常重要的知识点,本文主要从入门角度来探索动画. Android的动画主要包括三大类:逐帧(Frame)动画,补间(Tween)动画,属性动画. 1. 逐帧(Frame ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
转场动画：动画效果 css 动画 animate.css
实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...
js动画和css动画的差别
代码复杂度方面: 简单动画,css 代码实现会简单一些,js 复杂一些. 复杂动画的话,css 代码就会变得冗长,js实现起来更优. 动画运行时: 对动画的控制程度上,js 比较灵活,能控制动画暂停, ...

CSS3动画入门 CSS动画如何使用（举例说明）

CSS3动画入门 CSS动画如何使用（举例说明）相关推荐

最新文章

热门文章