css动态隐藏 |css3多个属性

新编css规则，aspx 动态添加css，css精美倒计时，css body兼容苹果手机，css12像素文字多宽，css3 文字掉落动画，css3多个属性 css动态隐藏 |css3多个属性

/* 首先，在CSS中设置元素的默认状态为display:block; */
.element{
display:block;
}
/* 接下来，当要隐藏元素时，可以通过如下代码进行操作：*/
.hide{
/* display:none;表示该元素不显示，同时不占用空间 */
display:none;
}

通过上述代码，大家可以实现在需要时隐藏一个元素，并重新显示该元素。接下来，大家还可以通过CSS动画等方式实现更加复杂的效果，下面来看一个例子：

/* 在CSS中设置动画关键帧 */
@keyframes slide-out{
0%{
transform:translateX(0);
opacity:1;
}
100%{
transform:translateX(100%);
opacity:0;
}
}
/* 为元素添加该动画效果 */
.element{
animation-name:slide-out;
animation-duration:1s;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:paused;
}
/* 当需要隐藏元素时，修改属性值 */
.hide{
animation-play-state:running;
}

通过上述代码，大家可以将一个元素在1秒钟内从左往右滑动，并逐渐变为透明，从而实现动态隐藏效果。而在需要重新显示该元素时，只需要将animation-play-state改为paused即可，相应的，大家还可以使用animation-fill-mode控制动画完成后的状态。