@keyframes

规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性

以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%

语法：@keyframes animationname {keyframes-selector {css-styles;}}

animation

是一个简写属性，用于设置六个动画属性：

animation-name

规定@keyframes动画的名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是0

animation-timing-function

规定动画的速度曲线，速度曲线用于使变化更为平滑

linear 动画从头到尾的速度是相同的

ease 默认。动画以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值

animation-delay

规定动画何时开始。默认是0

animation-iteration-count

规定动画被播放的次数。默认是1

infinite 规定动画应该无限次播放

animation-direction

规定动画是否在下一周期逆向地播放

normal 默认值。动画应该正常播放

alternate 交替更改动画的执行方向

reverse 反方向执行动画

alternate-reverse 从反方向开始交替更改动画的执行方向

animation-play-state

规定动画是否正在运行或暂停。默认是"running"

paused 规定动画已暂停

running 规定动画正在播放

animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见

none 不改变默认行为

forwards 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)

backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

div{

width: 100px;

height: 100px;

background: red;

animation: demo 5s ease infinite;

position: relative;

}

@keyframes demo{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px; border-radius: 50%;}

50% {background:blue; left:200px; top:200px; border-radius: 0%;}

75% {background:green; left:0px; top:200px; border-radius: 50%;}

100% {background:red; left:0px; top:0px;}

}

div{

margin: 0 auto;

width: 500px;

height: 35px;

overflow: hidden;

position: relative;

}

p{

width: 100000px;

position: absolute;

animation: divv 10s linear infinite;

}

@keyframes divv{

from{ left: 500px; }

to{ left: -800px; }

}

实现网页淡入效果：

body{

animation: demo 3s linear;

}

@keyframes demo{

0%{

opacity: 0;

background: #fff;

}

100%{

opacity: 1;

background: #fff;

}

}

transition

是一个简写属性，用于设置四个过渡属性：

transition-property

规定应用过渡的css属性的名称。(当指定的css属性改变时，过渡效果将开始)

过渡效果通常在用户将鼠标指针浮动到元素上时发生

none 没有属性会获得过渡效果

all 所有属性都将获得过渡效果

property 定义应用过渡效果的css属性名称列表，列表以逗号分隔

transition-duration

定义过渡效果花费的时间。默认是0

transition-timing-function

规定过渡效果的时间曲线。默认是"ease"

linear 规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(等于cubic-bezier(0.25,0.1,0.25,1))

ease-in 规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))

ease-out 规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1))

ease-in-out 规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58,1))

cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

transition-delay

规定过渡效果何时开始。默认是0

div{

display: inline-block;

background: red;

color: green;

font-size: 40px;

transition: background 1s linear, color 1s linear, font-size 1s linear;

}

div:hover{

background: green;

color: red;

font-size: 60px;

}

2D Transform Functions：

matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate()：指定对象的2D translation(2D平移)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translatex()：指定对象X轴(水平方向)的平移

translatey()：指定对象Y轴(垂直方向)的平移

rotate()：指定对象的2D rotation(2D旋转)，需先有 属性的定义

scale()：指定对象的2D scale(2D缩放)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scalex()：指定对象X轴的(水平方向)缩放

scaley()：指定对象Y轴的(垂直方向)缩放

skew()：指定对象skew transformation(斜切扭曲)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewx()：指定对象X轴的(水平方向)扭曲

skewy()：指定对象Y轴的(垂直方向)扭曲

transform: translate(100px,200px) rotate(45deg) scale(2);

transform: rotate(45deg) scale(2) translate(100px,200px);

第一个先移动，然后旋转，最后缩放。第二个先旋转，然后缩放，最后移动

两条代码的参数都一样，但变形的方法先后顺序不一样，结果也会不一样

transform-origin 指定变形的基准点

基准点在元素水平方向上的位置可以指定的值为：left，center，right

基准点在元素垂直方向上的位置可以指定的值为：top，center，bottom

.demo{

width: 100px;

height: 100px;

margin: 100px auto;

border-radius: 50px;

background: red;

transform-origin: center;

transform: rotate(45deg) translate(0%,0%);

transition: all 1s;

}

.demo:hover{

background: blue;

transform: rotate(450000deg) translate(5%,5%);

}

3D Transform Functions：

matrix3d()：以一个4x4矩阵的形式指定一个3D变换

translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

translatez()：指定对象Z轴的平移

rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

rotatex()：指定对象在x轴上的旋转角度

rotatey()：指定对象在y轴上的旋转角度

rotatez()：指定对象在z轴上的旋转角度

scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

scalez()：指定对象的z轴缩放

perspective()：指定透视距离

css动画过渡

css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

【CSS】css动画及过渡和变换属性

1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

CSS3之边框样式(动画过渡)

简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

css动画实现吃豆豆

话不多说,直接上代码:(作为一个初学者写的代码,多么0基础都能看的懂吧.) HTML部分

...

CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: ..

【CSS】过渡、动画和变换

1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. ..

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

CSS动画效果的回调

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

这样使用 GPU 渲染 CSS 动画(转)

大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

随机推荐

CAS Client集群环境的Session问题及解决方案

[原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 之前写过一篇文章,介绍单点登录的基本原理.这篇文章重点介绍开源单点登录系统CAS的登录和注销的实现方法.并结合实际工作中碰到的问题,探讨 ...

移动web app开发必备 - 异步队列 Deferred

背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

初始Jquery--以及工厂函数

一.JavaScript框架 1什么是JavaScript框架 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaSc ...

ios对SQLite3的使用

ios对SQLite3的使用 一.在Firefox中打开sqlite3(如果没有,选择工具->附加组件,添加即可)新建sqlite3数据库,Contacts, 建立一个members表,字段 i ...

build/core/base_rules.mk:195: already define

编译错误: build/core/base_rules.mk:195: *** packages/apps/ScanDemo: MODULE.TARGET.APPS.ScanDemo already ...

jQuery复习：第二章&第三章

第二章 一.选择器 1.层次选择器 $(“ancestor descendant”)选取ancestor元素里的所有后代元素 $(“parent > child”)选取parent元素下的chi ...

element-UI的Dialog弹出框蒙版被遮住

类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单