Day5

Posted 2020-08-09

 一、CSS3过渡：

 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

 要实现这一点，必须规定两项内容：

 规定您希望把效果添加到哪个 CSS 属性上 

 规定效果的时长 
 
 配合hover效果使用（触发）
 
 如果时长未规定，则不会有过渡效果，因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：

例：
  
  div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox  */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */
}

 二、CSS3动画：

 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
 
 当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

 规定动画的名称 
 规定动画的时长 
 
 例;改变背景和位置：
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}