Hoạt ảnh CSS trên <span>

Question

Tôi đang cố gắng áp dụng hoạt ảnh CSS cho thành phần <span> và tôi không thể làm cho nó hoạt động. Tôi không thể tìm thấy bất kỳ tài nguyên nào cho biết liệu hoạt ảnh có thể được áp dụng cho các yếu tố <span> hay không. Vì vậy, nó là tôi mà là làm cho một lỗi, hoặc được kéo dài hoạt hình miễn dịch?

Chỉnh sửa: Mã

Inf<span class="inf_o">o</span>rmation 
    <br> 
do<span class="don_n">n</span>e 
    <br> 
we<span class="dbl_l">ll</span> 

và css:

/* animations */ 
.inf_o 
{ 
    -webkit-animation-name: lower_head; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-timing-function:ease-in; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-play-state: active; 
} 

@-webkit-keyframes lower_head 
{ 
    from {margin-top:0px;} 
    to {margin-top:10px;} 
} 

Answer 1

vẻ như bạn phải thiết lập một thuộc tính display. Rõ ràng khối sẽ mess lên từ, vì vậy bạn cần phải sử dụng nội tuyến. Tôi đã nấu một jsfiddle cho bạn: http://jsfiddle.net/jdmiller82/XWkRX/1/

Như bạn có thể thấy hoạt ảnh 'o' xuống.

Answer 2

Tôi đã có một thời gian khó khăn để hoạt ảnh span của tôi hoạt động. Trong trường hợp của tôi, trang tải với display của khoảng được đặt thành none. Tôi đã thử nhiều công việc xung quanh nhưng một trong những làm việc cuối cùng (không may) đã được gỡ bỏ các display: none từ css và ẩn nó khi tải trang.

Trong trường hợp quan trọng, tôi đang sử dụng jQuery để ẩn/hiển thị khoảng.