css3动画

@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> </div>
<style>
    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;}
    }
</style>

<div>
    <p>目前主流浏览器chrome、safari、firefox、opera已经支持CSS3大部分功能了,IE10以后也开始全面支持CSS3了</p>
</div>
<style>
    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; }
    }
</style>

实现网页淡入效果:

<style>
    body{
        animation: demo 3s linear;
    }
    @keyframes demo{
        0%{
            opacity: 0;
            background: #fff;
        }
        100%{
            opacity: 1;
            background: #fff;
        }
    }
</style>

css3过渡

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>示例</div>
<style>
    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;
    }
</style>

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旋转),需先有 <' transform-origin '> 属性的定义

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

<div class="demo"> </div>
<style>
    .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%);
    }
</style>

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(动画,过渡,转换)的更多相关文章

  1. css动画过渡

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

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

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

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

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

  4. css动画实现吃豆豆

    话不多说,直接上代码:(作为一个初学者写的代码,多么0基础都能看的懂吧.) HTML部分 <!DOCTYPE html> <html lang=en> <head> ...

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

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

  6. 【CSS】过渡、动画和变换

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

  7. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

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

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

  9. CSS动画效果的回调

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

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

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

随机推荐

  1. 关于.NET的配置文件

    无论是exe文件还是dll文件,都可以添加App.config文件,里面设置配置信息.比如<appSettings></appSettings>之间,可以加入Key-Value ...

  2. 关于如何设置reduce的个数

    在默认情况下,一个MapReduce Job如果不设置Reducer的个数,那么Reducer的个数为1.具体,可以通过JobConf.setNumReduceTasks(int numOfReduc ...

  3. Codeforces Round #207 (Div. 2)

    A:超级大水题: 代码: #include<cstdio> #define maxn 105 using namespace std; int n,a[maxn],x,y,ans; int ...

  4. 关于sql语句in的使用注意规则( 转)

    select * from tuser where userno not in(select userno from filter_barcode) 上面这条语句子查询里,userno 并不存在fil ...

  5. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  6. nodejs之日志管理

    开发一个项目时,可以通过控制台输出或者debug来获取到项目的运行信息.当项目上线时,我们就需要通过日志来分析.如同Java的log4j,nodejs中也有相关的log4js.使用过log4j的同学应 ...

  7. 【转】XCode、Cocoa、Objective-C 的关系区别

    原文网址:http://blog.sina.com.cn/s/blog_5e89e1ff0100z4k1.html Object-Ciphone开发用的编程语言不是c,c++,java 而是objec ...

  8. linux安装JDK TOMCAT

    1.下载包 到http://apr.apache.org/下载下面3个包 apr-1.4.2.tar.gz apr-iconv-1.2.1.tar.gz apr-util-1.3.10.tar.gz  ...

  9. 最详细在Windows安装Xamarin.iOS教程

    最详细在Windows安装Xamarin.iOS教程 来源:http://www.cnblogs.com/llyfe2006/articles/3098280.html 本文展示了如何设立Xamari ...

  10. c++学习笔记(2)类的声名与实现的分离及内联函数

    一.类的声名与实现的分离: 和c函数声明与实现分离类似 有.h : 类的声明 .cpp : 类的实现 在在一个类的cpp中应该包含本类的.h文件 在cpp中类的使用:例: //Circle类 //Ci ...