css3 transform transition 动画效果

直接记住这几个transition的配置，就可以做出来漂亮的动画效果了

1.变形——旋转 rotate('旋转值’deg) ，rotate()函数只是旋转，而不会改变
元素的形状（旋转值为正顺时针旋转，旋转值为负逆时针旋转）

transform: rotate(45deg);

2.变形——扭曲 skew() skew()函数不会旋转，而只会改变元素的形状。
skew(x,y)使元素在水平和垂直方向同时扭曲（X 轴和 Y 轴同时按一定的角度值进行扭
曲变形，单值为单方向扭曲，先水平后垂直，也可单独设skewX()，skewY());

transform:skew(45deg,45deg);

3.变形——拉伸压缩 scale() 缩放 scale()函数让元素根据中心原点对对象进行缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（单值为单方向，先水平后垂直，
也可单独设scaleX()，scaleY());
注： 0<X，Y<1 为缩放 X，Y > 0 为放大；

transform: scale(1.5，1.5);

4.变形——位移 translate(); translate()函数可以将元素向指定的方向移动.
translate(x,y)水平方向和垂直方向同时移动，（单值为单方向，先水平后垂直，
也可单独设translateX()，translateY());

transform: translate(100px,100px);

((学完上面差不多就可以做动画了))
5.动画——过度属性 transition通过某事件的触发，平滑地改变 CSS 的属性值,达到动画效果

1.在 CSS 中创建简单的过渡效果可以从以下几个步骤来实现：第一，初始化默认样式；第二，声明样式的最终样式；第三，在默认样式中通过添加过渡函数。
2.再了解一下这几个默认属性：transition-property:指定过渡或动态模拟的CSS属性 例：transition-property: border-radius;transition-duration:指定完成过渡所需的时间 例：transition-duration: .5stransition-timing-function:指定过渡函数,指的是过渡的“缓动函数”。主要用来指定浏览器的过渡
速度，以及过渡期间的操作进展情况transition-delay:指定开始出现的延迟时,主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
3.Keyframes 被称为关键帧，可以以百分比为单位去生成一套动画效果
例：@keyframes changecolor{0%{background: red;}50%{background-color: yellow;}100%{background: green;}}
4.动画效果设计好了，则需要调用动画（这里以div加动画为例）div:hover {animation-name: changecolor;   animation-name 属性主要是用来调用@keyframes 定义好的动画animation-duration: 10s;    animation-duration 主要用来设置 CSS3 动画播放时间animation-timing-function: ease-in-out;  animation-timing-function 属性主要用来设置动画播放方式。animation-delay: .1s;  animation-delay 属性用来定义动画开始播放的时间，用来触发动画播放的时间点。animation-iteration-count:5; animation-iteration-count 属性主要用来定义动画的播放次数。如果取值为 infinite，动画将会无限次的播放animation-direction:alternate; animation-direction 属性主要用来设置动画播放方向，其主要有两个值：normal、alternate（normal 是默认值，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。）注意：Chrome 或 Safari 浏览器，需要加入-webkit-前缀！animation-play-state:paused; animation-play-state 属性主要用来控制元素动画的播放状态。其主要有两个值：running 和 paused，不予细说。}

css3 transform transition 动画效果相关推荐

HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
Css3制作风琴动画效果
Css3制作风琴动画效果开发工具与关键技术:DW 作者:谢嘉浚撰写时间:2019-03-30 使用css3来制作风琴动画效果,首先在html放一个大的div,设置它的宽高.背景颜色.再在div里面 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络先给大家一 ...

css3 transform transition 动画效果

css3 transform transition 动画效果相关推荐

最新文章

热门文章