【html5和css3】animation属性整理

常做笔记，踏实学习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="abc.css"><title></title><style>.div1{width: 500px;height: 500px;border-radius: 50%;margin:0 auto;background-color: #333;animation: changewidth 2s ease-in-out 0s 50 alternate ;}/*这里animation的值可以填6个，分别标志为①②③④⑤⑥*/@keyframes changewidth{0%{width: 500px;background-color: black;}50%{width: 0;background-color: aqua;}100%{width: 500px;background-color: red;}}</style>
</head>
<body><div class="div1"></div>
</body>
</html>

大概是这样的一个公式：
animation：①②③④⑤⑥；
@keyframes ①
{
0%{ **}；
10%{ *}；
……
100%{*}；
}

①的值为animation-name，顾名思义，为名字，待会儿下面就要艾特它

②的值为animation-duration，即一个动画持续的的时间，设置0.5s肯定比5s快很多

③的值为animation-timing-function，即该动画的变化速度，例如，可以设置它一直以相同速度转，也可以先慢再快再慢等
它的值有：

④的值为animation-delay，即在一个动画开始之前等待多长时间，可以设置2s，也可以设置为0

⑤的值为animation-iteration-count，顾名思义，是动画进行的次数，一个完整动画连续进行的次数，直接填整数就好了

⑥的值为animation-direction，即动画的方向，有以下选择可填：

@keyframes ①
{
这里面可以填很多属性，如：width，height，font，background，color……
}

本文地址：http://liuyanzhao.com/3427.html

转载请注明

【html5和css3】animation属性整理相关推荐

CSS3 animation属性运用—雪碧图
一.雪碧图指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动. 二.animation属性 1. 语法: animation: name duration ...
html5中有哪些新属性,整理HTML5中表单的常用属性及新属性
HTML5 新的表单属性HTML5 的和标签添加了几个新属性.新属性: autocomplete novalidate 新属性: autocomplete autofocus form forma ...
仿迅雷官网html模板,jquery css3 animation属性仿迅雷登录页面带幻灯片单页模板
样式仿迅雷的,重新手写清爽代码资源下载此资源下载价格为4D币,请先登录资源文件列表 codedown123-0814-35/images/all.css , 29088 codedown123-0 ...
css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
html5 meta标签属性整理
html5 meta标签属性整理前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...

【html5和css3】animation属性整理

【html5和css3】animation属性整理相关推荐

最新文章

热门文章