一个好网站:http://www.jqhtml.com/

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

示例:

@keyframes myfirst{from {background: red;}to {background: yellow;}}
@-moz-keyframes myfirst{from {background: red;}to {background: yellow;}}
@-webkit-keyframes myfirst{ from {background: red;} to {background: yellow;} }
@-o-keyframes myfirst { from {background: red;} to {background: yellow;} }

当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:1.规定动画的名称  2.规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。

animation-timing-function的取值:

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
steps(n,s)动画一帧帧改变,中间没有渐变的效果。

steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量(必须是正整数)

第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;

step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。

step(n,s)的第一个参数,是指在两个关键帧之间变化的次数。

step(n,s)的第二个参数:

step-start在变化过程中,都是以下一帧的显示效果来填充间隔动画,所以0% 到 50%  直接就显示了黄色yellow

step-end与上面相反,都是以上一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了红色red

steps函数,它可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。
第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。可以看出:steps(1, start) 等于step-start,steps(1,end)等于step-end
最核心的一点就是:timing-function 作用于每两个关键帧之间,而不是整个动画

左右摇动效果样式:

@keyframes leftandright {
% {
transform: scale() rotate(0deg);
-webkit-transform: scale() rotate(0deg);
opacity: ;
}
% {
transform: scale(.) rotate(0deg);
-webkit-transform: scale(.) rotate(0deg);
opacity: .;
}
% {
transform: scale(.) rotate(8deg);
-webkit-transform: scale(.) rotate(8deg);
opacity: .;
}
% {
transform: scale(.) rotate(-6deg);
-webkit-transform: scale(.) rotate(-6deg);
opacity: .;
}
% {
transform: scale(.) rotate(4deg);
-webkit-transform: scale(.) rotate(4deg);
opacity: .;
}
% {
transform: scale(.) rotate(-2deg);
-webkit-transform: scale(.) rotate(-2deg);
opacity: .;
}
% {
transform: scale() rotate(0deg);
-webkit-transform: scale() rotate(0deg);
opacity: .;
}
% {
opacity: ;
}
} .fun {
position: absolute;
}
.fun1 {
right: 50px;
top: 100px;
transform: scaleY(1.3);
opacity: ;
transform-origin: % %;
z-index:;
}
.fun1.active {
-webkit-animation: fun_in1 .6s .5s linear both;
animation: fun_in1 .6s .5s linear both;
}
.listen-btn img{
-webkit-animation: leftandright .8s 2s infinite;
animation: leftandright .8s 2s infinite;
} <a href="#" class="listen-btn"><img src="/img/ts0.png" alt="" /></a>

@keyframes说明:http://www.w3school.com.cn/cssref/pr_keyframes.asp

animation说明:http://www.w3school.com.cn/cssref/pr_animation.asp

transform说明:http://www.w3school.com.cn/cssref/pr_transform.asp

transition说明:http://www.w3school.com.cn/cssref/pr_transition.asp

CSS3 @keyframes 规则以及animation介绍和各种动画样式说明的更多相关文章

  1. CSS3 @keyframes 规则

    今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...

  2. animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画

    通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...

  3. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  4. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  5. css3 @keyframes、transform详解与实例

    一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...

  6. android Animation介绍

    Animation介绍: 在Android SDK介绍了2种Animation模式: 1. Tween Animation:间动画,通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即 ...

  7. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  8. CSS3 Transitions, Transforms和Animation使用简介与应用展示

    CSS3 Transitions, Transforms和Animation使用简介与应用展示 by zhangxinxu from http://www.zhangxinxu.com本文地址:htt ...

  9. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

随机推荐

  1. java实现远程控制

    屏幕监控: Robot robot = new Robot();Dimension d = Toolkit.getDefaultToolkit().getScreenSize();image = ro ...

  2. express无中间件的增删改查

    index.js const express = require("express");导入express框架 const data = require("./data& ...

  3. ubuntu16.04安装python3,numpy,pandas等量化计算库

    ubunt安装python3 sudo add-apt-repository ppa:fkrull/deadsnakessudo apt-get updatesudo apt-get install ...

  4. 关系型数据库之Mysql

    简介 主要知识点包括:能够与mysql建立连接,创建数据库.表,分别从图形界面与脚本界面两个方面讲解 相关的知识点包括:E-R关系模型,数据库的3范式,mysql中数据字段的类型,字段约束 数据库的操 ...

  5. MYSQL体系结构-来自期刊

    MySQL三层体系结构 |-----------------------------------------------------------------------------------| | ...

  6. angular 路由动态加载JS文件

    纯属分享 //把下面代码放在新建JS文件里,引入在头部 //angural路由功能--一个路由动态加载JS (function (name, context, definition) { if (ty ...

  7. iframe中子页面父页面里函数互调

    在iframe中很多要用的子页面父页面函数互调的情况,下面看一下各自用法,本人写个人网站的时候用过其他场景尚未试过 子页面调父页面 function fu(){ alert('父'); } funct ...

  8. postgresql 的操作

    基本操作: \o /tmp/11.txt ,查询结果输出到文件 \d 查询table结构 \x 切换显示方式 postgresql中可以导出某个sql的执行结果到文件中,方法是在psql中首先执行\o ...

  9. Linux下生成openssl自签名证书

    校验证书是否被 CA 证书签名,正确的情况: $ openssl verify -CAfile /etc/kubernetes/cert/ca.pem /etc/kubernetes/cert/kub ...

  10. DateJsonValueProcessor日期处理

    package com.zjx.controller; import java.text.SimpleDateFormat; import net.sf.json.JsonConfig; import ...