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. springboot 启动排除某些bean 的注入

    问题: 最近做项目的时候,需要引入其他的jar.然后还需要扫描这些jar里的某些bean.于是使用注解:@ComponentScan这个注解直接指定包名就可以,它会去扫描这个包下所有的class,然后 ...

  2. 日期类的使用(java)-蓝桥杯

    蓝桥杯日期问题常考,java提供了日期类很方便: //日历类 Calendar c = Calendar.getInstance(); // 获取实例化对象 Date date =c.getTime( ...

  3. Nmap 进阶使用 [ 脚本篇 ]

    0×01 前言 因为今天的重点并非nmap本身的使用,主要还是想借这次机会给大家介绍一些在实战中相对比较实用的nmap脚本,所以关于nmap自身的一些基础选项就不多说了,详情可参考博客端口渗透相关文章 ...

  4. 解决 AutoMapper ProjectTo 不起作用的问题

    这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL ...

  5. nginx,maven

    nginx反向代理 负载均衡 keepalive高可用 lvs负载均衡算法 mvn build自定义命令 install安装到本地仓库

  6. CentOS下添加用户并且让用户获得root权限

    转自:https://blog.csdn.net/tropicofcancer9/article/details/53926920 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: ...

  7. hive高级数据类型

    hive的高级数据类型主要包括:数组类型.map类型.结构体类型.集合类型,以下将分别详细介绍. 1)数组类型 array_type:array<data_type> -- 建表语句 cr ...

  8. Django集成Bootstrap美化后台

    1.pip install bootstrap-admin 2.编辑项目下的settings.py,增加下面行,放在最前面 3.编辑项目下的settings.py,增加下面行

  9. 一个人工智能教程,教案接地气、限制级。 http://www.captainbed.net

    一个人工智能教程,教案接地气.限制级. http://www.captainbed.net https://open.weibo.com/

  10. 《Redis 使用规范》

    一:Redis 概述 - Redis 是内存级别的数据库,在一台普通电脑上,Redis 3.X 便可以读取 10 万个键值对(现在的Redis官方版本已经更新到了5.X,性能会更好). 二:关于Red ...