做网站用jquery,wordpress邮件有什么用,青岛网站设计案例,黄金网站网址免费动画是使元素从一种样式逐渐变化为另外一种效果#xff0c;CSS3动画的生成#xff0c;主要依赖keyframes定义动画#xff0c;animation执行动画。
keyframes
通过 keyframes 规则创建动画。 keyframes keyframes-name {keyframes-selector {css-styles;}}keyframes-name 帧…动画是使元素从一种样式逐渐变化为另外一种效果CSS3动画的生成主要依赖keyframes定义动画animation执行动画。
keyframes
通过 keyframes 规则创建动画。 keyframes keyframes-name {keyframes-selector {css-styles;}}keyframes-name 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。keyframes-selector 动画时长的百分比。合法值 0-100% from 等效于 0% to 等效于 100%css-styles 需要改变的css样式支持多属性 animation
animation 是一个简写的属性用于设置6个动画属性
animation-name这个就是使用keyframes定义的动画名称animation-duration动画执行的时间以秒为单位animation-delay规定动画开始之前的延迟animation-iteration-count规定动画应该播放的次数,n(次数) | infinite(无限次)animation-direction规定是否应该轮流反向播放动画animation-timing-function规定动画的速度曲线
keyframes changeSize {0% {transform: scale(0.8); }50% {transform: scale(1.2); }100% {transform: scale(0.8); }
}.demo {animation-name: changeSize;animation-duration: 2s;animation-iteration-count:infinite;
}animation-timing-function
这里说下复杂属性第一个是animation-timing-function规定动画速度的曲线
值说明ease默认低速开始然后加快结束前变慢linear从头到尾速度相同ease-in以低速度开始先慢后快ease-out以低速结束先快后慢ease-in-out以低速开始和结束cubic-bezier(x1,y1,x2,y2)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
cubic-bezier三次赛贝尔曲线函数前面的几个预设函数都可以通过它来实现。 通过控制曲线上的四个点起始点(0,0)、终止点(1,1)以及两个相互分离的中间点来绘制一条曲线并以曲线的状态来反映动画过程中速度的变化。可以访问 cubic-bezier.com 来设置对应的值。
ease 的效果等同于 cubic-bezier(.25,.01,.25,1)
linear 的效果等同于 cubic-bezier(0,0,1,1)
ease-in 的效果等同于 cubic-bezier(.42,0,1,1)
ease-out 的效果等同于 cubic-bezier(0,0,.58,1)
ease-in-out 的效果等同于 cubic-bezier(.42,0,.58,1) keyframes dropdown {0% {top: 0px;}100% {top: 420px;}
}ul li{:first-child{animation: dropdown 6s ease infinite;}:nth-child(2){animation: dropdown 6s linear infinite;}:nth-child(3){animation: dropdown 6s ease-in infinite;}:nth-child(4){animation: dropdown 6s ease-out infinite;}:nth-child(5){animation: dropdown 6s ease-in-out infinite;}:last-child{animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite;}
}animation-direction
animation-direction 定义是否应该轮流反向播放动画如果动画次数设置为一次则无效。
值说明normal默认正常播放reverse动画反向播放alternate交替播放 动画会在奇数次数1、3、5 等等正常播放而在偶数次数2、4、6 等等反向播放。alternate-reverse交替播放 动画会在奇数次数1、3、5 等等反向播放而在偶数次数2、4、6 等等正常播放。
我们可以把上面的案例每个都加上alternate的参数再看下效果是不是更赞了
ul li{:first-child{animation: dropdown 6s ease infinite alternate;}:nth-child(2){animation: dropdown 6s linear infinite alternate;}:nth-child(3){animation: dropdown 6s ease-in infinite alternate;}:nth-child(4){animation: dropdown 6s ease-out infinite alternate;}:nth-child(5){animation: dropdown 6s ease-in-out infinite alternate;}:last-child{animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite alternate;}
} 旋转
img {width: 315px;height: 315px;animation: circle 10s infinite linear;keyframes circle {from {transform: rotate(0);}to {transform: rotate(360deg);}}}//
keyframes circleAnimate {0%{opacity: .3;}100%{opacity: 1;}}.l{left:0;::before{position: absolute;width:100%;height:100%;content: ;background: url(./img/l1.min.png);animation: circleAnimate 1s ease-in-out 0s infinite;}::after{position: absolute;width:100%;height:100%;content: ;background: url(./img/l1-2.min.png);animation: circleAnimate 1s ease-in-out 0.5s infinite;}}
