css动画的过渡
1 打印
@page rotated{size:landscape;}
p{page:rotated;page-break-before:left;}
2 页分割符
取值:
auto:如果需要,在对象之后插入页分割符
always:始终在对象之后插入页分割符
avoid:避免在对象之后插入页分割符
left:在对象之后插入页分割符直到它到达一个空白的左页边
right:在对象之后插入页分割符直到它到达一个空白的右页边 -->
p{
page-break-after:always;
}
page-break-after:always
page-break-after:always
page-break-after:always
page-break-after:always
3 插入页分割符
right:在对象前面插入页分割符直到它到达一个空白的右页边
说明:
检索或设置对象之前出现的页分割符。
对应的脚本特性为pageBreakBefore。
-->
p{
page-break-before:always;
}
page-break-before:always
page-break-before:always
page-break-before:always
page-break-before:always
4 对象容器内部出现页分割符
p{
page-break-inside:auto;
}
page-break-inside:auto
page-break-inside:auto
page-break-inside:auto
page-break-inside:auto
5 复合属性动画特效
虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式 -->
div{
position:absolute;
top:50%;
left:50%;
overflow:hidden;
width:300px;
height:150px;
margin:-75px00-150px;
border:3px solid#eee;
background:#e0e0e0;
}
span{
opacity:0;
display:block;
height:50px;
font:bold14px/50px Georgia;
}
.a1{
-webkit-transform: translate(60px);
-webkit-animation: animations 2s ease-out;
-moz-transform: translate(55px);
-moz-animation: animations 2s ease-out;
-o-transform: translate(55px);
-o-animation: animations 2s ease-out;
-ms-transform: translate(55px);
-ms-animation: animations 2s ease-out;
transform: translate(55px);
animation: animations 2s ease-out;
}
@-webkit-keyframes animations {
0%{
-webkit-transform: translate(0);
opacity:0;
}
50%{
-webkit-transform: translate(30px);
opacity:1;
}
70%{
-webkit-transform: translate(35px);
opacity:1;
}
100%{
-webkit-transform: translate(60px);
opacity:0;
}
}
@-moz-keyframes animations {
0%{
-moz-transform: translate(0);
opacity:0;
}
50%{
-moz-transform: translate(30px);
opacity:1;
}
70%{
-moz-transform: translate(35px);
opacity:1;
}
100%{
-moz-transform: translate(60px);
opacity:0;
}
}
@-o-keyframes animations {
0%{
-o-transform: translate(0);
opacity:0;
}
50%{
-o-transform: translate(30px);
opacity:1;
}
70%{
-o-transform: translate(35px);
opacity:1;
}
100%{
-o-transform: translate(60px);
opacity:0;
}
}
@-ms-keyframes animations {
0%{
-ms-transform: translate(0);
opacity:0;
}
50%{
-ms-transform: translate(30px);
opacity:1;
}
70%{
-ms-transform: translate(35px);
opacity:1;
}
100%{
-ms-transform: translate(60px);
opacity:0;
}
}
@keyframes animations {
0%{
transform: translate(0);
opacity:0;
}
50%{
transform: translate(30px);
opacity:1;
}
70%{
transform: translate(35px);
opacity:1;
}
100%{
transform: translate(60px);
opacity:0;
}
}
.a3{
-webkit-transform: translate(100px);
-webkit-animation: animations3 2s ease-out2s;
-moz-transform: translate(100px);
-moz-animation: animations3 2s ease-out2s;
-o-transform: translate(100px);
-o-animation: animations3 2s ease-out2s;
-ms-transform: translate(100px);
-ms-animation: animations3 2s ease-out2s;
transform: translate(100px);
animation: animations3 2s ease-out2s;
}
@-webkit-keyframes animations3 {
0%{
-webkit-transform: translate(160px);
opacity:0;
}
50%{
-webkit-transform: translate(130px);
opacity:1;
}
70%{
-webkit-transform: translate(125px);
opacity:1;
}
100%{
-webkit-transform: translate(100px);
opacity:0;
}
}
@-moz-keyframes animations3 {
0%{
-moz-transform: translate(160px);
opacity:0;
}
50%{
-moz-transform: translate(130px);
opacity:1;
}
70%{
-moz-transform: translate(125px);
opacity:1;
}
100%{
-moz-transform: translate(100px);
opacity:0;
}
}
@-o-keyframes animations3 {
0%{
-o-transform: translate(160px);
opacity:0;
}
50%{
-o-transform: translate(130px);
opacity:1;
}
70%{
-o-transform: translate(125px);
opacity:1;
}
100%{
-o-transform: translate(100px);
opacity:0;
}
}
@-ms-keyframes animations3 {
0%{
-ms-transform: translate(160px);
opacity:0;
}
50%{
-ms-transform: translate(130px);
opacity:1;
}
70%{
-ms-transform: translate(125px);
opacity:1;
}
100%{
-ms-transform: translate(100px);
opacity:0;
}
}
@keyframes animations3 {
transform: translate(160px);
opacity:0;
}
50%{
transform: translate(130px);
opacity:1;
}
70%{
transform: translate(125px);
opacity:1;
}
100%{
transform: translate(100px);
opacity:0;
}
}
.a2{
text-align: center;
font-size:26px;
-webkit-animation: animations2 5s ease-in-out4s;
-moz-animation: animations2 5s ease-in-out4s;
-o-animation: animations2 5s ease-in-out4s;
-ms-animation: animations2 5s ease-in-out4s;
animation: animations2 5s ease-in-out4s;
}
@-webkit-keyframes animations2 {
0%{
opacity:0;
}
40%{
opacity:.8;
}
45%{
opacity:.3;
}
50%{
opacity:.8;
}
55%{
opacity:.3;
}
opacity:.8;
}
100%{
opacity:0;
}
}
@-moz-keyframes animations2 { 0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@-o-keyframes animations2 { 0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@-ms-keyframes animations2 { 0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
CSS3 Animations
CSS3 Animations
CSS3 Animations
6 动画延迟
取值:
-->
太阳将在1s后开始下山:
7 弹性运动
如果提供多个属性值,以逗号进行分隔。
对应的脚本特性为animationDirection。
语法:
animation-direction:normal | alternate [ , normal | alternate ]*
默认值:normal
取值:
normal:正常方向
写法:
内核类型
写法
Webkit(Chrome/Safari) -webkit-animation-direction
Gecko(Firefox) -moz-animation-direction
Presto(Opera)
Trident(IE) -ms-animation-direction
W3C animation-direction
-->
弹性运动的太阳:
8 文字落下