1.css动画

创建一个动画:

@keyframes name{        //动画名字
0% { //动画开始
transform: translateY(0);
}
100% { //动画结束
transform: translateY(-700px) rotate(600deg);
}
}

为元素绑定动画:

 animation: donghua 25s infinite linear;//参数分别为:动画名字,执行时间25秒,重复播放,匀速播放

设置动画延迟播放:

animation-delay: 11s;        //11秒后播放该动画

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

 animation-direction: norma1       //默认正常播放
animation-direction: alternate //反向播放

动画是否暂停播放

 animation-play-state:running    //正常播放
animation-play-state:paused //暂停播放

属性规定动画在播放之前或之后,其动画效果是否可见:

 animation-fill-mode:none         //不改变默认行为。

 animation-fill-mode:forwards        //当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

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

 animation-fill-mode:both       //向前和向后填充模式都被应用

定义动画循环次数:

 animation-iteration-count: 10;

2.css动画过渡

 transition: 2s;        //意味在动画将在两秒钟内过渡完成

3.transform变换

移动元素自身的50%:

transform:transfrom(-50%,-50%)        //两个参数分别代表该元素的50%高和50%宽

顺时针旋转:

 transform:rotate(0deg);        //会以顺时针旋转,注意此处单位为deg

放大或缩小:

 transform:scale(宽的倍数,高的倍数);

倾斜 X和Y轴的倾斜角度:

 transform:skew(0deg,0deg)        //两个参数分别代表为x轴和y轴

合并以上的参数,注意总共有6个值:

 transform:matrix(【旋转】30deg,【缩放】2,4,【平移】2px,4px,【倾斜】30deg,30deg)

定位中心点:

 transform-origin:50%,50%;         //分别代表x轴和y轴

以x轴做3D旋转:

 -webkit-transform: rotateX(120deg);

以y轴做3D旋转:

 -webkit-transform: rotateY(130deg);

使所有的子元素在3D空间内显示(应用在父级元素):

 -webkit-transform-style: flat             //2d平面
-webkit-transform-style:preserve-3d; //3d空间

距离3D元素的距离:

 1.放在本身:  transform: perspective(600px) rotateY(45deg);   //视点都是以本身转45度

 2.放在父元素  perspective: 600px;      //视点是同一个父元素的视点,所以旋转效果是不同的

3D元素下边所在XY轴值(应用在父级元素)

 perspective-origin: -200px -400px;   // 将该元素的中心点放在x-200,y-400的位置,宽/高   

设置3D元素的反面能不能可见

 backface-visibility: visible    //显示,可看到水平/垂直反转后的画面
backface-visibility:hidden; //隐藏,不可见,只能看见白色的内容

【CSS】css动画及过渡和变换属性的更多相关文章

  1. css(动画,过渡,转换)

    css3动画 @keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性 以百分比来规定改变发生的时间,或者通过关键词"from"和" ...

  2. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  3. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器

    一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...

  5. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  6. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  7. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  8. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  9. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

随机推荐

  1. hibernate 报query result offset is not supported

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  2. angular.isObject()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery 心跳请求

    原文链接:http://caibaojian.com/setinterval.html 前言:1.使用setInterval()的定时器会把事件运行的时间也包含在内,如果要精确算定时两个任务之间的时间 ...

  4. nginx/php的redis模块扩展

    redis模块介绍 redis2-nginx-module 可以实现 Nginx 以非阻塞方式直接防问远方的 Redis 服务,可以启用强大的 Redis 连接池功能,进而实现更多的连接与更快速的访问 ...

  5. 16进制转化8进制---map

    #include "stdio.h" #include "string.h" #include "string" #include &quo ...

  6. [LeetCode] Friends Of Appropriate Ages 适合年龄段的朋友

    Some people will make friend requests. The list of their ages is given and ages[i] is the age of the ...

  7. js 工厂模式、简单模式、抽象模式

    简单工厂模式又称为静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类的对象.其实,工厂模式的思想主要是将相同/相似的的对象或类进行提取归类,这样的话,就可以避免写太多重复性 ...

  8. Linux命令行抓包及包解析工具tshark(wireshark)使用实例解析

    在Linux下,当我们需要抓取网络数据包分析时,通常是使用tcpdump抓取网络raw数据包存到一个文件,然后下载到本地使用wireshark界面网络分析工具进行网络包分析. 最近才发现,原来wire ...

  9. 推荐几种Java任务调度的实现

    几种任务调度的 Java 实现方法与比较--转载 原文:http://www.ibm.com/developerworks/cn/java/j-lo-taskschedule/ 写了一天的作业调度,这 ...

  10. javascript基础常识了解一下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...