trandform

元素 2D/3D 转换. 对元素进行 旋转 / 移动 / 缩放 / 倾斜

CSS 中创建动画. 必须学习 @keyframes 规则.

@keyframes 简介

@keyframes 作用: 创建动画:使元素移动.显隐等等…. @keyframes 原理: 从一套css 逐渐变成另一套css

动画过程中可以用百分比来多次改变CSS样式.

旋转

元素必须设置为display:block 元素必须设置为display:block 元素必须设置为display:block display: inline-block; 也是可以的 …..  display: inline-block; 也是可以的 ….. 

元素必须设置成 block 才能旋转的……

目前浏览器 都不支持 keyframes. Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

通过这个 能创建动画.

动画原理: 在动画过程中 多次改变 css .

0% 是动画的开始时间,100% 动画的结束时间。

请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

使 div 元素匀速向下移动:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}


@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
100% {top:200px;}
}

@keyframes from/to)-100%

百分比/关键词来控制动画发生时间. from/to; == 0%/100% from/0% 动画开始时间 to/100% 动画结束时间

@keyframes mymove
{
0%   {left:0px;}
100% {left:100px;}
}

等于 @keyframes mymove { from {left:0px;} to {left:100px;} }

CSS 动画

用 @keyframes 创建动画时, 必须捆绑到某个选择器.否则不会产生动画. 至少添加两项 CSS3 动画属性 才能把动画绑定到选择器. 动画的名称 + 时长

CSS动画 实例

小正方形. 向右边来回摆动.然后回到原点 test { width:10px; height:10px; background:red; position:relative; animation:mymove 5s; }

@keyframes mymove
{
0%   {left:0px;}
25%  {left:200px;}
75%  {left:50px}
100% {left:100px;}
}

CSS 动画属性

@keyframes                 规定动画
animation                  所有动画属性的简写属性.
animation-name             规定 @keyframes 动画的名称.
animation-duration         规定动画完成一个周期所花费的秒或毫秒。   默认是 0。
animation-timing-function  规定动画的速度曲线。                     默认是 "ease"。
animation-delay            规定动画何时开始。                       默认是 0。
animation-iteration-count  规定动画被播放的次数。                   默认是 1。
animation-direction        规定动画是否在下一周期逆向地播放。       默认是 "normal"。
animation-play-state       规定动画是否正在运行或暂停。             默认是 "running"。
animation-fill-mode        规定对象动画时间之外的状态。

动画属性详细实例

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;

/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;

/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

动画属性简写实例

div
{
animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;

/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;

/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

animation

保留动画后的状态.不返回.

-webkit-animation-fill-mode:both; 这个样式是为了动画完成后保留动画完成时的状态,如果不加这个样式的话动画完成后又会弹回原来状态了。

$(“#cateDiv”).animate( {left:’-100%’, opacity:’0.5’ })

$(“#cateDiv”).hide(1);

旋转transform

竖直中心轴旋转. http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatey 水平中心轴旋转 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatex y 轴伸缩.x不变. http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scaley x 轴伸缩.y不变 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scalex xy同时伸缩 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale 整体下移 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey 整体右移 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatex 抽屉!! 整体右下移 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate 整体中心点旋转 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate&p=22

右移 (抽屉)

MyDIV

{ transform:translateX(10px); }

slideToggle

slideToggle() 方法 上下的 抽屉隐藏效果.

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

CSS-显隐动画✔︎

div的渐隐渐现,或者叫逐渐显示,渐渐显示,慢慢显示等:
$(“#objId”).fadeIn(1000); // 逐渐显示,参数值越大,表示渐变时间越长
$(“#objId”).fadeOut(1000); // 逐渐隐藏,参数值越大,表示渐变时间越长 *这个div 是立即显示的 . 只是里面的文字会慢慢淡出而已*

div的逐渐收缩和展开: 这个动画样式 有 非常多种. 自己去挑吧…. 

$(“#objId”).是({height: ‘toggle’, opacity: ‘toggle’}, “slow”);

有很好的 现成的动画 CSS. https://daneden.github.io/animate.css/

各种漂亮动画….

 阮一封 动画 animation 实在是 太有用了 必学….

动画: 两部分组 transition + animation

transition 过度. 状态变化所需时间

之前 css 是没有时间轴的.所有状态都是即时完成的..

比如一张图片. 默认 15px 宽高. 鼠标悬浮: 变成450px. 这个变化太快了…. 不太好..

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}


下面这个  图片放大 就会有过度效果. 很好看...
img{
    height:15px;
    width:15px;
    display: block;
    margin:15px auto;
    transition: 1s;
}

img:hover{
    height: 450px;
    width: 450px;
}

还可以指定过渡 适用的属性.  比如只用于高度. 那么:
宽度就会立刻变宽 高度会慢慢增加.
也就达到了 下拉的效果....
img{
    height:15px;
    width:15px;
    display: block;
    margin:15px auto;
    transition:1s height;    
}

img:hover{
    height: 450px;
    width: 450px;
}

transition-delay 延时

还能同时指定多个属性

img{    transition: 1s height, 1s width;  }

但是 这个 宽高是同时变化的… 和不指定没有区别…

们希望,让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数 img{ transition: 1s height, 1s 1s width; }

transition-timing-function

transition的状态变化速度(又称timing function),默认不是匀速的,而是逐渐放慢,这叫做ease。

img{    transition: 1s ease;  }

(1)linear:匀速 (2)ease-in:加速 (3)ease-out:减速 (4)cubic-bezier函数:自定义速度模式

transition的各项属性

img{    transition: 1s 1s height ease;  }

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

transition的使用注意

(1)目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。

(2)不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果。

(3)transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。

transition的局限

transition 但是它有几个很大的局限。 (1)transition需要事件触发,所以没法在网页加载时自动发生。 (2)transition是一次性的,不能重复发生,除非一再触发。 (3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 (4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 CSS Animation就是为了解决这些问题而提出的。

第二部分:CSS Animation

基本用法: 首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。

div:hover {
  animation: 1s rainbow;
}

上面代码表示,当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。 为此,我们还需要用keyframes关键字,定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

jquery 显隐

hide/show 立即隐藏显示

**动画**
上下高度变化 ...  也算隐藏啊....

    $("#box").animate({width:300},"slow");

$("#start").click(function(){
    $("#box").animate({height:300},2000);
    $("#box").animate({height:100},2000);
  });



**slideUp slideDown 抽屉上下拉**
  $("p").slideUp(1000);

 




**slideToggle() 抽屉上下 显/隐**
  $("p").slideToggle();



**fadeTo 淡出. ** 可隐藏 也可透明部分....
  $("p").fadeTo(1000,0.4);


**fadeOut/fadeIn 类似hide 有点慢而已**
  $("p").fadeOut();

visibility:hidden 设置为隐藏 display:none 设置为不占位

(“#id”).css(‘display’,’none’);  $(“#id”).css(‘display’,’block’);  或  $(“#id”)0.style.display = ‘none’; 

$(“#id”)返回的是JQuery  它是个集合肯定有display属性

$(“#id”).show()表示display:block, $(“#id”).hide()表示display:none; $(“#id”).toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

渐变

 background: linear-gradient(to right, #e8b6e4,gray, pink);  

两种颜色 制造出平滑的 渐变效果.. 而不是用图片来实现.

两种渐变类型

线性渐变. 左右 linear-gradient 径向渐变. 圆圈 radial-gradient

线性渐变

至少定义 起点颜色. + 终点颜色. 当然也可以有多种颜色 实现复杂的效果.

上下渐变:

background: linear-gradient(to bottom, blue, white);

左右渐变:

background: linear-gradient(to right, blue, white); 

还可以控制 颜色转换的 位置: 这个就是在 距离上方80%的地方开始换颜色. 默认是 50%.

background: linear-gradient(to bottom, blue, white 80%, orange);

透明

使用多个背景图层. 可以实现 淡入淡出的效果… background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);