CSS3之动画Animation特效
CSS3的出现 让我们通过css样式也能写出炫酷的特效
通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果
DEMO：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: #008aff;
position: absolute;
-webkit-animation:aname 10s;
-o-animation:aname 10s;
animation:aname 10s;
}
@keyframes aname {
0%{top:0px;left: 0px;}
30%{top:0px;left: 500px;}
60%{top:500px;left: 0px;}
100%{top:0px;left: 0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这段代码演示的是一个蓝色的正方形div在10秒内移动的过程
首先 我们用animation这个属性 声明了一个名称 aname 在这个名称的后面10s是指定这个动画的运行时长为10秒
为什么要写三个animation属性 这三个animation代表着为css3的不同浏览器进行兼容
前缀 -o- 代表着 opera 内核的浏览器
前缀 -webkit- 代表着拥有webkit内核的浏览器 如 Chrome 搜狗浏览器 猎豹浏览器
@keyframes aname(动画名) 这个样式是执行动画用的 它是写在div外面的
@keyframes 内部的 0%{} 是规定动画在运行时长的百分比状态
也就是0%的时候我规定了它的坐标top和left都是0px
当然 还有其他的动画属性
播放的次数 animation-iteration-count
可以写数字也可以写infinite代表无限次
动画的播放曲线 animation-timing-function
默认值 linear 无变化
ease 开始快 结束慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(参数,参数,参数，参数) 写自己的参数 0到1规定速度
如果不是时间很长的动画 以上并不会有太大的不同
是否逆行播放 animation-direction 默认值 normal 逆行 alternate
是否暂停动画 animation-play-state 默认值 running 暂停 paused
动画何时开启 animation-delay 数字加s
当然以上的所有属性可以简写成这样
animation: aname 5s linear 2s infinite alternate;
CSS3之动画Animation特效的更多相关文章
- CSS3(4)---动画(animation)
CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...
- css3中动画animation的应用
<!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
随机推荐
- 国外大师给PHP初学者的8条建议
学习一门新语言可能会是一件很艰巨的任务,最好的办法就是借鉴前辈的经验已达到事半功倍,下面就是为php新手们准备的一些经验餐. 1.从OOP开始Naramore是SourceForge员工以及PHPWo ...
- 纯Java代码 图片压缩
Java图片压缩代码 package com.img; import java.awt.Image; import java.awt.image.BufferedImage; import java. ...
- Mybatis原理图
Mybatis原理图 MyBatis 是一个基于Java的持久层框架.它提供的持久层框架包括SQL Maps和Data Access Objects(DAO). MyBatis 是支持普通 SQL查询 ...
- pb_ds(平板电视)整理
有人说BZOJ3040用普通的<queue>中priority_queue搞dijkstra过不了. 我只想说你们的djk可能写的太丑了. 先上代码 #include<iostrea ...
- XAF-列表视图数据访问模式
本主题介绍有关列表视图如何提供数据访问的几种方式.请注意,选择正确的方式对于实现XAF应用程序的最佳性能至关重要. 数据访问模式概述 在模型编辑器中,通过 视图-> <ListV ...
- ubuntu16 网络设置
打开Ubuntu的终端,输入:sudo gedit /etc/network/interfaces表示使用gedit编辑器打开interfaces文件. 在打开的文件中,若有内容,先全部删除.然后输入 ...
- java基础面向对象之类与对象
java基础面向对象之类与对象 2017-01-14 1.面向对象的基本概念 以一种组建化的形式进行代码设计 1)在面向对象程序设计中包含有如下几种特性 •封装性:保护内部结构的安全性 •继承性:在已 ...
- 【.NET】Linq几样特点
LinQ 是 .net framework 3.5的技术,对集合的查询和操作十分方便,结合LinQ Provider ,可以更方便操作XML和SQL(或Entity). LinQ有6样常用的特性: 自 ...
- codevs1069关押罪犯（并查集）
题目描述 Description S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极 不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨 ...
- 关于web多标签多条件筛选的思考以及缓存的正确使用方法(上)
做项目的过程中,发现一次远程链接数据库的耗时大概是300ms~400ms,切身体会到了前辈们经常说的减少链接的重要性,用了缓存后页面的打开时间从1.5s减少到400ms 前提: 那么来说一说正题,we ...