您当前位置:首页 >> 新闻

css3.0 动画尝试记录

时间:2019-05-27 08:36:12 点击:

css3.0早就有支持动画的属性,但是一直没有尝试,最近有空闲,所以学习一下,顺便记录一共以后回顾。

在我的理解暂时css的动画分两种一种是关键帧动画,一种是鼠标事件动画。

关键帧动画主要是有 animation触发,

.mac { width: 100px; position: relative;  animation:aaa 4s infinite 1s ease-in-out; margin-left: 550px;  border-radius: 50px; }


例如 animation:aaa 4s infinite 1s ease-in-out;其中animation是动画的css名,aaa是事件的名称,4s是动画的持续时间,infinte是动画的循环,这个也可以写成5 表示动画的执行次数是5次,1s是动画的延迟执行时间,ease-in-out 是动画的缓入缓出。

然后就是aaa的动画事件的定义了,

@keyframes aaa {
        0%{top:0px;left: 0px;  background: #f00;}        
        50%{top:300px; left: 100px; transform: rotateY(1turn); background: #00f;}        
        100%{top:0px; left: 0px; }
        }

这个大概看一下就了解了,分别是整个动画的时间分成三个关键帧,每一个关键帧的动画效果是什么,其中第二个关键帧的动画transform: rotateY(1turn);表示动画沿Y轴旋转效果,top和left 分别是动画的XY轴的位置。


其二就是鼠标事件动画例如:

    .pic a{ width: 100%; height: 210px; display: block; transition: 0.5s all ;  }
    .pic a:hover { transform:  scale(1.2); }


transition 属性设置元素当过渡效果,四个简写属性为:

  • transition-property   这默认可以是all width height ,指的是宽度或者高度动画属性都发生变化

  • transition-duration   动画的执行时间

  • transition-timing-function   动画效果的缓动,值ease或者ease-in

  • transition-delay   动画延迟执行时间

默认值:    all 0 ease 0


transform:  scale(1.2);主要就是动画效果,2D缩放和3D旋转效果



https://send.firefox.com/download/8dfc0ebb964748a9/#A49FZG94TNaknmkAsZZJBg

上一篇:xiaocms的上传附件大小的控制文件

评论



这个是我写的

评论内容: