css3 animation动画使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.basic{
background-color: red;
/* width: 300px;
height: 300px; */
} @keyframes animate1
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-moz-keyframes animate1 /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-webkit-keyframes animate1 /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-o-keyframes animate1 /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} .animate2 { animation: animate1 5s;
-moz-animation: animate1 5s; /* Firefox */
-webkit-animation: animate1 5s; /* Safari 和 Chrome */
-o-animation: animate1 5s; /* Opera */ } </style>
</head>
<body>
<div class="basic" id="div1">
hello world.
</div> <button type="button" name="button">点击应用动画</button> <script type="text/javascript">
const btn = document.getElementsByName('button')[0];
const div = document.getElementById("div1");
btn.addEventListener('click', ()=>{
console.log("点击按钮。。。");
if(div.classList.contains("basic")){
div.classList.remove("basic");
}
div.classList.add("animate2");
});
</script>
</body>
</html>
1. 使用@keyframes定义一个动画效果。
@keyframes animate1
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-moz-keyframes animate1 /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-webkit-keyframes animate1 /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-o-keyframes animate1 /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2.将动画效果先绑定到css类上。
.animate2 {
animation: animate1 5s;
-moz-animation: animate1 5s; /* Firefox */
-webkit-animation: animate1 5s; /* Safari 和 Chrome */
-o-animation: animate1 5s; /* Opera */
}
3.将动画效果应用到指定的元素上。
const btn = document.getElementsByName('button')[0];
const div = document.getElementById("div1");
btn.addEventListener('click', ()=>{
console.log("点击按钮。。。");
if(div.classList.contains("basic")){
div.classList.remove("basic");
}
div.classList.add("animate2");
});
当点击按钮时，就会将定义的动画效果应用到div上。
css3 animation动画使用的更多相关文章
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
- 关于css3 Animation动画
在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...
随机推荐
- c# 二维码支持中文
/// <summary> /// 生成二维码,保存成图片 /// </summary> static void Generate1(string text) { Barcod ...
- leetcode190
public class Solution { public uint reverseBits(uint n) { var list = new List<uint>();//逆序的二进制 ...
- DevExpress之XtraReport 学习
XtraReport 一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而 ...
- ansible模块学习
ansible的功能: 模块化任务,调用特定的模块,完成特定的任务 基于python语言实现,由paramiko.pyyaml和jinja2三个模块构建 部署简单,agentless,ansible基 ...
- javascript中所谓的“坑”收录
坑一: // 反例myname = "global"; // 全局变量function func() { alert(myname); // "undefined&quo ...
- MVC各层的职责
Model(模型):模型代表着核心的业务逻辑和数据(不要理解成Model只是实体类) View(视图):视图应该关注与如何展示数据,而不应该包含任何业务逻辑(业务逻辑应写在Model中) Contro ...
- sql的预编译问题
- js练习 closure
window.onload = function() { for (var i = 1; i < 4; i++) { var id = doc ...
- 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
实现EXCEL导入功能:web网站,excel导入用OLEDB同样会报错:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序 报错信息: Exception caught. ...
- VMware Workstation 虚拟机的服务启动项