CSS3动画的常见属性（CSS3）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3动画的常见属性</title><style>@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(1000px, 0);}}div {width: 100px;height: 100px;background-color: skyblue;/* 动画名称 *//*   animation-name: move; *//* 持续时间 *//*  animation-duration: 2s; *//* 运动曲线 *//*  animation-timing-function: ease; *//* 何时开始 *//*  animation-delay: 0.5s; *//* 重复次数 iteration 重复的    count 次数    infinite 无限 *//*   animation-iteration-count: infinite; *//*    是否反方向播放   默认的是 normal  如果想要反方向 则 alternate*//*   animation-direction: alternate; *//* 动画结束后的状态 默认的是backwa回到起始状态 我们可以让它停留在结束状态forwards *//* animation-fill-mode: forwards; *//*  animation: name duration timing-function delay iteration-count direction fill-mode; */animation: move 2s linear 0s infinite alternate forwards;/*  linear是匀速的意思 */}div:hover {/*  鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>

CSS3动画的常见属性（CSS3）相关推荐

css3动画字幕_使用CSS3动画创建高级“字幕”
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 今天,我们将再次看一看"字幕 ...
css3 动画翅膀震动,纯css3制作煽动翅膀的蝴蝶
纯css3制作煽动翅膀的蝴蝶,先看效果怎么样,效果还不错吧上代码: html cssbody{ background: url("./images/bg.jpg&q ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
css3有哪些新增属性,CSS3新增属性
本篇文章为大家介绍一些CSS3新增的属性,CSS3新属性的出现弥补了CSS2版本的不足,解决了很多我们设置元素样式时的痛点. 1.文本阴影属性 text-shadow:水平距离垂直距离模糊半径(模 ...
css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）
Title div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; fl ...
HTML5新属性+CSS3动画
HTML5 一.什么是HTML5 1.1 HTML5 的概念与定义定义: HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走.不过也正常,毕竟多了一个维度,要有三维应有的尊严. 3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来 ...

CSS3动画的常见属性（CSS3）

CSS3动画的常见属性（CSS3）

CSS3动画的常见属性（CSS3）相关推荐

最新文章

热门文章