CSS3 2D转换动画-白红宇

CSS3 2D转换动画

阅读量：6257 次

发布时间：2019-06-22

本文共 1251 字，大约阅读时间需要 4 分钟。

transform：translate（x,y）；

过度鼠标悬浮在2s内完成所有变化

div{
       width:100px;    height:100px;    background:red;    transition: 2s;       -webkit-transition: 2s; /* Safari */}div:hover{
       width:300px;    height:200px;}

CSS3 动画

当在 @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;}}