Transition images 2

Transition images on thier load event

by neoswf

HTML

<img src="https://api.ideassync.com/fs/default/file/c0561f6fa1e32077b1cd7037054f889e29bb9dd9eee49352a8ddb528fd3ad534/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img src="https://api.ideassync.com/fs/default/file/8c20ac1f350fd2e6376d7c1ad9fb2d8fb6c0e58322ed1d7f92555a083ac0fca8/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img src="https://api.ideassync.com/fs/default/file/15743bdfa30cb79ef8ee24ae3823d5ce07bf4ec6bc90c7e2b440a9c9aef6b8ff/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img src="https://api.ideassync.com/fs/default/file/3efe72782fec998a6d4572d7eea0f88a50f683f71cd7f142adcc1a45d6e059a1/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img src="https://api.ideassync.com/fs/default/file/a3fcce93dbd069a000f6b63162eda5ef4fd8a24eb27721b32723a895dcf761c2/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />

CSS

img{
   height:100px;
    -webkit-animation-name: animateOpacity;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;
}
@-webkit-keyframes animateOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}