【CSS】css动画及过渡和变换属性
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动画及过渡和变换属性的更多相关文章
- css(动画,过渡,转换)
css3动画 @keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性 以百分比来规定改变发生的时间,或者通过关键词"from"和" ...
- CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器
一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
随机推荐
- springboot 启动排除某些bean 的注入
问题: 最近做项目的时候,需要引入其他的jar.然后还需要扫描这些jar里的某些bean.于是使用注解:@ComponentScan这个注解直接指定包名就可以,它会去扫描这个包下所有的class,然后 ...
- 日期类的使用(java)-蓝桥杯
蓝桥杯日期问题常考,java提供了日期类很方便: //日历类 Calendar c = Calendar.getInstance(); // 获取实例化对象 Date date =c.getTime( ...
- Nmap 进阶使用 [ 脚本篇 ]
0×01 前言 因为今天的重点并非nmap本身的使用,主要还是想借这次机会给大家介绍一些在实战中相对比较实用的nmap脚本,所以关于nmap自身的一些基础选项就不多说了,详情可参考博客端口渗透相关文章 ...
- 解决 AutoMapper ProjectTo 不起作用的问题
这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL ...
- nginx,maven
nginx反向代理 负载均衡 keepalive高可用 lvs负载均衡算法 mvn build自定义命令 install安装到本地仓库
- CentOS下添加用户并且让用户获得root权限
转自:https://blog.csdn.net/tropicofcancer9/article/details/53926920 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: ...
- hive高级数据类型
hive的高级数据类型主要包括:数组类型.map类型.结构体类型.集合类型,以下将分别详细介绍. 1)数组类型 array_type:array<data_type> -- 建表语句 cr ...
- Django集成Bootstrap美化后台
1.pip install bootstrap-admin 2.编辑项目下的settings.py,增加下面行,放在最前面 3.编辑项目下的settings.py,增加下面行
- 一个人工智能教程,教案接地气、限制级。 http://www.captainbed.net
一个人工智能教程,教案接地气.限制级. http://www.captainbed.net https://open.weibo.com/
- 《Redis 使用规范》
一:Redis 概述 - Redis 是内存级别的数据库,在一台普通电脑上,Redis 3.X 便可以读取 10 万个键值对(现在的Redis官方版本已经更新到了5.X,性能会更好). 二:关于Red ...